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

Question

I'm trying to add a custom type to angular-schema-form for the ui-bootstrap datepicker.

I've followed the instructions, but my field isn't rendered when opening the form.

My module, loaded into the page:

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');
    }
]);

My template:

<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>

Schema Data:

{"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"}}}

Any ideas?

Kalyan · Accepted Answer · 2016-02-23 20:24:51Z

Assuming you are making changes date type. You have to include your type of field in schema. To implement add on, you have to

Add a new type of field
Add a new decorator

As it states in documentation, your new type should be second parameter to addMapping, then provide template and make sure you declare that type in your schema to display.

$scope.form = 
[
 {
   key: "birthday",
   type: "datepicker"
 }
];

In your case, you have to change date to:

"JoinDate": {"type":"datepicker","title":"JoinDate"}.

note: datepicker already exists you can use that form type. but your custom impelementation will work as long as you dont include angular-schema-form-datepicker

documentation does have some information but it is confusing for first time. https://github.com/json-schema-form/angular-schema-form/blob/master/docs/extending.md.

sorry, i cant comment so posting as answer.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related