Question

我正在尝试为ui-bootstrap datepicker的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"}.

注意：datepicker已经存在，您可以使用该表单类型。但只要你不包含angular-schema-form-datepicker

文档确实有一些信息，但第一次令人困惑。 https://github.com/json-schema-form/angular-schema-form/blob/master/docs/extending.md

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

1 个答案: