1

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

有任何想法吗？

4

1 回答 1

2

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

  1. 添加新类型的字段
  2. 添加一个新的装饰器

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

抱歉，我不能发表评论，所以发布为答案。

于 2016-02-23T20:24:51.537 回答