小编Sun*_*ich的帖子

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

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

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

常规输入字段

但开箱即用的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
);
Run Code Online (Sandbox Code Playgroud)

我还增加的内容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"
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

我只看到第一个字段(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 …
Run Code Online (Sandbox Code Playgroud)

angularjs angular-schema-form

6
推荐指数
1
解决办法
1579
查看次数

标签 统计

angular-schema-form ×1

angularjs ×1