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

Question

我刚开始研究角度模式形式,所以这可能是我在文档或描述中遗漏的东西.

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

但开箱即用的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},
}, []);

我希望看到所有字段都呈现相同,因为我只定义了默认类型和我自己的自定义类型.但是,我只看到渲染的内置类型,我的custominput直到被忽略.

我错过了什么？

Answer 1

我也遇到过同样的问题，问题是您不应该将 JSON 模式与表单定义混淆。

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

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

您必须将其更改为：

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