将自定义类型添加到 angular-schema-form - datepicker
Adding a custom type to angular-schema-form - datepicker
我正在尝试为 ui-bootstrap 日期选择器向 angular-schema-form 添加自定义类型。
我已按照说明进行操作,但打开表单时我的字段未呈现。
我的模块,加载到页面中:
angular.module('schemaForm-datepicker', ['schemaForm']).config(
[
'schemaFormProvider', 'schemaFormDecoratorsProvider', 'sfPathProvider',
function (schemaFormProvider, schemaFormDecoratorsProvider, sfPathProvider) {
var picker = function (name, schema, options) {
console.log(schema.type);
if (schema.type === 'date') {
console.log("found");
var f = schemaFormProvider.stdFormObj(name, schema, options);
f.key = options.path;
f.type = 'datepicker';
options.lookup[sfPathProvider.stringify(options.path)] = f;
return f;
}
};
schemaFormProvider.defaults.object.unshift(picker);
//Add to the bootstrap directive
schemaFormDecoratorsProvider.addMapping('bootstrapDecorator', 'datepicker',
'template/datepicker.html');
schemaFormDecoratorsProvider.createDirective('datepicker',
'template/datepicker.html');
}
]);
我的模板:
<div class="form-group" ng-class="{'has-error': hasError()}">
<label class="control-label" ng-show="showTitle()">{{form.title}}</label>
<input type="text"
class="form-control"
schema-validate="form"
ng-model="$$value$$"
placeholder="Date" />
<span class="help-block" sf-message="form.description"></span>
</div>
架构数据:
{"type":"object","properties":{"FirstName":{"type":"string","title":"FirstName"},"LastName":{"type":"string","title":"LastName"},"CompanyName":{"type":"string","title":"CompanyName"},"EmailAddress":{"type":"string","title":"EmailAddress"},"JoinDate":{"type":"date","title":"JoinDate"}}}
有什么想法吗?
假设您正在更改日期类型。
您必须在模式中包含您的字段类型。
要实施附加功能,您必须
- 添加新类型的字段
- 添加新装饰器
如文档中所述,您的新类型应该是 addMapping 的第二个参数,然后提供模板并确保您在要显示的模式中声明该类型。
$scope.form =
[
{
key: "birthday",
type: "datepicker"
}
];
对于您的情况,您必须将日期更改为:
"JoinDate": {"type":"datepicker","title":"JoinDate"}.
注意:日期选择器已经存在,您可以使用该表单类型。但只要您不包含 angular-schema-form-datepicker
,您的自定义实现就会起作用
文档确实有一些信息,但这是第一次混淆。
https://github.com/json-schema-form/angular-schema-form/blob/master/docs/extending.md.
抱歉,我不能发表评论,所以发帖作为回答。
我正在尝试为 ui-bootstrap 日期选择器向 angular-schema-form 添加自定义类型。
我已按照说明进行操作,但打开表单时我的字段未呈现。
我的模块,加载到页面中:
angular.module('schemaForm-datepicker', ['schemaForm']).config(
[
'schemaFormProvider', 'schemaFormDecoratorsProvider', 'sfPathProvider',
function (schemaFormProvider, schemaFormDecoratorsProvider, sfPathProvider) {
var picker = function (name, schema, options) {
console.log(schema.type);
if (schema.type === 'date') {
console.log("found");
var f = schemaFormProvider.stdFormObj(name, schema, options);
f.key = options.path;
f.type = 'datepicker';
options.lookup[sfPathProvider.stringify(options.path)] = f;
return f;
}
};
schemaFormProvider.defaults.object.unshift(picker);
//Add to the bootstrap directive
schemaFormDecoratorsProvider.addMapping('bootstrapDecorator', 'datepicker',
'template/datepicker.html');
schemaFormDecoratorsProvider.createDirective('datepicker',
'template/datepicker.html');
}
]);
我的模板:
<div class="form-group" ng-class="{'has-error': hasError()}">
<label class="control-label" ng-show="showTitle()">{{form.title}}</label>
<input type="text"
class="form-control"
schema-validate="form"
ng-model="$$value$$"
placeholder="Date" />
<span class="help-block" sf-message="form.description"></span>
</div>
架构数据:
{"type":"object","properties":{"FirstName":{"type":"string","title":"FirstName"},"LastName":{"type":"string","title":"LastName"},"CompanyName":{"type":"string","title":"CompanyName"},"EmailAddress":{"type":"string","title":"EmailAddress"},"JoinDate":{"type":"date","title":"JoinDate"}}}
有什么想法吗?
假设您正在更改日期类型。 您必须在模式中包含您的字段类型。 要实施附加功能,您必须
- 添加新类型的字段
- 添加新装饰器
如文档中所述,您的新类型应该是 addMapping 的第二个参数,然后提供模板并确保您在要显示的模式中声明该类型。
$scope.form =
[
{
key: "birthday",
type: "datepicker"
}
];
对于您的情况,您必须将日期更改为:
"JoinDate": {"type":"datepicker","title":"JoinDate"}.
注意:日期选择器已经存在,您可以使用该表单类型。但只要您不包含 angular-schema-form-datepicker
,您的自定义实现就会起作用文档确实有一些信息,但这是第一次混淆。 https://github.com/json-schema-form/angular-schema-form/blob/master/docs/extending.md.
抱歉,我不能发表评论,所以发帖作为回答。