angularjs - 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 )

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

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"
        }
    }
}

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

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

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

作为测试，我尝试定义自己的装饰器，覆盖默认的 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 模式与表单定义混淆。

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

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

您必须将其更改为:

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