开始配置
增加一个表单的扩展类型,需要最基本的一个template模板和一些builder functions,具体代码如下:
template:
<div class="form-group {{form.htmlClass}}" ng-class="{'has-error': hasError(),'has-success': hasSuccess()}">
<label class="control-label {{form.labelHtmlClass}}" ng-show="showTitle()">{{form.title}}</label>
<tags-input
schema-validate="form"
min-length="{{form.minLength}}"
max-length="{{form.maxLength}}"
min-tags="{{form.minTags}}"
max-tags="{{form.maxTags}}"
ng-model="$$value$$"
name="{{form.key.slice(-1)[0]}}"
placeholder="{{form.placeholder}}"
class="{{form.fieldHtmlClass}}"></tags-input>
<span class="help-block">{{ (hasError() && errorMessage(schemaError())) || form.description}}</span>
</div>
js:
angular.module('myAddOnModule',['schemaForm'])
.config(function(schemaFormDecoratorsProvider, sfPathProvider, schemaFormProvider,) {
var tagCloud = function (name, schema, options) {
if (schema.type === 'array' && (schema.format === 'tagCloud')) {
var f = schemaFormProvider.stdFormObj(name, schema, options);
f.key = options.path;
f.type = 'tagCloud';
options.lookup[sfPathProvider.stringify(options.path)] = f;
return f;
}
};
schemaFormProvider.defaults.array.unshift(tagCloud);
schemaFormDecoratorsProvider.addMapping(
'bootstrapDecorator',
'tagCloud',
tagCloudTemplate
);
schemaFormDecoratorsProvider.createDirective(
tagCloudTemplate
);
});
以上是我在项目中使用的标签输入类型扩展,schema-validate="form"是必须的,它会对form组件上的model进行validate,如果没有写入该语句,最后生成的表单控件将不会具备表单验证。has-error、has-success、hasError()、hasSuccess()都是angular-schema-form中内置的表单验证成功的样式和调用方法,可以根据自己的需要进行使用。
ng-model是通过$$value$$进行绑定的,它直接绑定的是form配置的key的model。
自定义的可配置项都可以通过form.property进行定义,在使用schema form配置form文件时,可以在form中对property进行配置,形如:
var form = [
{
key: "name",
minLength: 4
}
]
如上面的代码示例,我在扩展类型中自定义了form的minLength属性,所以在使用时,可以通过在form中配置minLength进行使用。
<span class="help-block">{{ (hasError() && errorMessage(schemaError())) || form.description}}</span> 该段代码是用来对表单控件的描述和错误信息进行展示