angular-schema-form：添加自定义 html 到表单字段

Question

我刚刚开始研究 angular-schema-form，所以这可能是我在文档或描述中遗漏的内容。

我想做的是在生成的表单字段的标签旁边和字段本身旁边添加一个图标。像这样：

但开箱即用 angular-schema-form 将生成：

我知道我可以创建自己的自定义字段类型，但这是可行的方法吗？这将需要我重新定义自定义变体中的所有字段类型，因为我需要这两个图标及其在我的所有表单字段上的功能。

我希望有一种更简单的方法可以将此功能添加到生成的 html，以及一种可以在其上添加功能（ng-click 功能）的简单方法。

编辑：再次阅读文档后，我发现我需要定义自己的自定义字段类型 (https://github.com/Textalk/angular-schema-form/blob/development/docs/extending.md)

根据我收集到的信息，我需要将以下内容添加到我的模块配置块中：

schemaFormDecoratorsProvider.addMapping(
    'bootstrapDecorator',
    'custominput',
    'shared/templates/customInput.tpl.html',
    sfBuilderProvider.builders.sfField
);

我也将shared/templates/customInput.tpl.html的内容添加到$templatesCache。

但是当我尝试呈现一个表单时，其架构类似于

"schema": {
    "type": "object",
    "properties": {
        "firstName": {
            "title": "First name",
            "type": "string"
        },
        "lastName": {
            "title": "Last name",
            "type": "custominput"
        },
        "age": {
            "title": "Age",
            "type": "number"
        }
    }
}

我只看到第一个字段 (firstName) 和年龄。自定义类型被忽略。

我已经尝试调试解决问题的方法，但据我所知，自定义字段已正确添加到装饰器中。我已经尝试 console.log schemaFormDecoratorsProvider.decorator() 并且在那里我可以看到我的自定义字段类型。

我也尝试在我的控制器中触发 $scope.$broadcast('schemaFormRedraw')，但我仍然只能看到内置的字段类型。

作为测试，我尝试定义自己的装饰器，覆盖默认的 Bootstrap 装饰器：

schemaFormDecoratorsProvider.defineDecorator('bootstrapDecorator', {           
    'customType': {template: 'shared/templates/customInput.tpl.html', builder: sfBuilderProvider.stdBuilders},
    // The default is special, if the builder can't find a match it uses the default template.
    'default': {template: 'shared/templates/customInput.tpl.html', builder: sfBuilderProvider.stdBuilders},
}, []);

我希望看到所有字段呈现相同，因为我只定义了默认类型和我自己的自定义类型。但是，我仍然只看到渲染的内置类型，我的自定义输入直到被忽略。

我错过了什么？

Answer 1

我遇到了同样的问题，问题是您不应将 JSON 架构与表单定义混淆。

要呈现自定义组件，您必须更改表单定义。即在您的控制器中，您的标准表单定义可能类似于：

$scope.form = [
    "*",
    {
      type: "submit",
      title: "Save"
    }
  ];

您必须将其更改为：

$scope.form = [
    "firstName",
    "age",
    {
        key:"lastName",
        type:"customInput"
    },
    {
      type: "submit",
      title: "Save"
    }
  ];

angular-schema-form：添加自定义 html 到表单字段

angular-schema-form: Add custom html to form fields

angularjs

angular-schema-form