angular-schema-form: Unable to use custom form type

Enhancement

Greetings,

I wish to create a custom datepicker addon, as the angular-schema-form-datepicker addon does not suit my needs. I have tried understanding the docs on creating an addon, but I seem to miss something somewhere.

Expected behaviour

As in the docs, the custom field uses the bootstrap decorator, I figured I would not need to create my own decorator. I mainly copied most code, changing only the settings to fit my project. I would expect the field to show up by now.

Actual behaviour

Unfortunately, the field does not show up, I also do not get any errors in the console, and the extension’s .html is also not loaded.

Demo

Here is my controller:

var app = angular.module('testApp', ['schemaForm']);
app.controller('FormController', function($scope) {
    $scope.schema = {
        type: "object",
        properties: {
            name: {
                type: "string",
                minLength: 2,
                title: "Name",
                description: "Name or alias"
            },
            email: {
                type: "string",
                format: "email",
                title: "E-mail address",
                description: "Example: someone@example.com"
            },
            birthdate: {
                type: "date",
                title: "Birthdate",
                description: "Enter your birthdate"
            }
        }
    };
    $scope.form = [
        "*",
        {
            type: "submit",
            title: "Submit"
        }
    ];
});

And here is the code for the custom field type:

var app = angular.module('testApp');
app.config(function(schemaFormDecoratorsProvider, sfBuilderProvider) {
    schemaFormDecoratorsProvider.defineAddOn(
        'bootstrapDecorator',
        'date',
        '/client/fieldtypes/datepicker.html',
        sfBuilderProvider.stdBuilders);
});

And the fields html

<div>
    <label>{{form.title}}</label>
    <input sf-field-model schema-validate="form" type="text" placeholder="Hello, its me">
    <div sf-message="form.description"></div>
</div>

Thank you for your time, and I hope to get your response.

@json-schema-form/angular-schema-form-lead

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 1
Comments: 15 (5 by maintainers)

Most upvoted comments

@HeerRik maybe a bit too late, but i got some remarks, since i was working on a plugin on my own recently:

.addmapping: is marked as depricated, however if you dont need any custom decorator, .addmapping should be fine.

Since I did not want to overwrite a default (string, number, array, …) I created my own type with a corresponding rule. This makes it more clear in the definition AND the default validation is not triggered (since my plugin is able to return different types, this was important to me). So here is my code:

`angular.module(‘schemaForm’).config( [‘schemaFormProvider’, ‘schemaFormDecoratorsProvider’, ‘sfPathProvider’, ‘sfBuilderProvider’, function (schemaFormProvider, schemaFormDecoratorsProvider, sfPathProvider) {

var customType = function (name, schema, options) {
    if (schema.type === 'customType') {
      var f = schemaFormProvider.stdFormObj(name, schema, options);
      f.key = options.path;
      f.type = 'customType';
      options.lookup[sfPathProvider.stringify(options.path)] = f;
      return f;
    }

  };

  schemaFormProvider.appendRule('customType', customType);

  schemaFormDecoratorsProvider.addMapping(
    'bootstrapDecorator',
    'customType',
    'path/to/html'
  );

}]);`

Be aware that I used appendRule(…) to add my plugin, in contrast to the above way to add to the defaults array

burgstaller on Jan 11, 2018

Did you add your template to the templateCache?

$templateCache.put('client/fieldtypes/datepicker.html', '...')

raoulus on May 19, 2016