将自定义类型添加到 angular-schema-form - datepicker

Question

我正在尝试为 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"}}}

有什么想法吗？

Answer 1

假设您正在更改日期类型。 您必须在模式中包含您的字段类型。要实施附加功能，您必须

添加新类型的字段
添加新装饰器

如文档中所述，您的新类型应该是 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.

抱歉，我不能发表评论，所以发帖作为回答。

将自定义类型添加到 angular-schema-form - datepicker

Adding a custom type to angular-schema-form - datepicker

angularjs

angular-ui-bootstrap

angular-schema-form