[英]angular-schema-form: Add custom html to form fields
I have just started to look into angular-schema-form, so this might be something I've missed in the docs or description. 我刚刚开始研究angular-schema-form,所以这可能是我在文档或说明中遗漏的内容。
What I am trying to do is to add an icon next to the label of generated form fields and next to the field itself. 我想做的是在生成的表单字段的标签旁边和字段本身旁边添加一个图标。 Like so:
像这样:
But out of the box angular-schema-form will generate: 但是开箱即用的角度模式形式会生成:
I know I can make my own custom field types, but is that the way to go? 我知道我可以创建自己的自定义字段类型,但这是可行的方法吗? That would require me to redefine all field types in a custom variant, because I need these two icons and their functionality on all my form fields.
这将需要我在自定义变量中重新定义所有字段类型,因为我在所有表单字段上都需要这两个图标及其功能。
I was hoping there were an easier way to add this functionality to generated html, and an easy way to add functionality (ng-click function) on them. 我希望有一种更简便的方法将此功能添加到生成的html,以及一种在其上添加功能(ng-click函数)的简便方法。
Edit: After reading through the docs again, I've figured out that I need to define my own custom field type ( https://github.com/Textalk/angular-schema-form/blob/development/docs/extending.md ) 编辑:再次阅读文档后,我发现我需要定义自己的自定义字段类型( https://github.com/Textalk/angular-schema-form/blob/development/docs/extending.md )
From what I gather, I need to add the following to my modules config block: 根据我的收集,我需要将以下内容添加到我的模块配置块中:
schemaFormDecoratorsProvider.addMapping(
'bootstrapDecorator',
'custominput',
'shared/templates/customInput.tpl.html',
sfBuilderProvider.builders.sfField
);
I have also added the contents of shared/templates/customInput.tpl.html
to $templatesCache
. 我还已经将
shared/templates/customInput.tpl.html
的内容添加到$templatesCache
。
But when I try to render a form, with a schema like 但是当我尝试使用诸如
"schema": {
"type": "object",
"properties": {
"firstName": {
"title": "First name",
"type": "string"
},
"lastName": {
"title": "Last name",
"type": "custominput"
},
"age": {
"title": "Age",
"type": "number"
}
}
}
I only see the first field (firstName) and age. 我只看到第一个字段(名字)和年龄。 The custom type is just ignored.
自定义类型将被忽略。
I have tried to debug my way to the problem, but as far as I can see, the custom field is correctly added to the decorator. 我尝试调试解决问题的方法,但据我所知,自定义字段已正确添加到装饰器中。 I've tried to console.log the
schemaFormDecoratorsProvider.decorator()
and there I can see my custom field type. 我尝试过console.log
schemaFormDecoratorsProvider.decorator()
,在那里可以看到我的自定义字段类型。
I've also tried to fire off a $scope.$broadcast('schemaFormRedraw')
in my controller, but I still only see the built in field types. 我还尝试在控制器中触发
$scope.$broadcast('schemaFormRedraw')
,但仍然只能看到内置的字段类型。
As a test, I've tried to define my own decorator, overwriting the default Bootstrap decorator: 作为测试,我尝试定义自己的装饰器,覆盖默认的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},
}, []);
I would expect to see all fields to be rendered the same, since I only define a default type and my own custom type. 我希望看到所有字段都呈现相同的效果,因为我仅定义了默认类型和我自己的自定义类型。 But still, I only see built in types rendered, my custominput is till just ignored.
但是,尽管如此,我只看到内置的类型呈现,我的custominput直到被忽略为止。
What am I missing? 我想念什么?
I've had this same problem, the problem is that you should not confuse the JSON schema with the form definition. 我遇到了同样的问题,问题是您不应该将JSON模式与表单定义混淆。
To render a custom component you have to change the form definition. 要渲染自定义组件,您必须更改表单定义。 Ie in your controller your standard form defintion might look something like:
即在您的控制器中,您的标准格式定义可能类似于:
$scope.form = [
"*",
{
type: "submit",
title: "Save"
}
];
You'll have to change this to: 您必须将其更改为:
$scope.form = [
"firstName",
"age",
{
key:"lastName",
type:"customInput"
},
{
type: "submit",
title: "Save"
}
];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.