angular-schema-form: Add custom html to form fields

Question

I have just started to look into angular-schema-form, so this might be something I've missed in the docs or description.

What I am trying to do is to add an icon next to the label of generated form fields and next to the field itself. Like so:

But out of the box angular-schema-form will generate:

I know I can make my own custom field types, but is that the way to go? That would require me to redefine all field types in a custom variant, because I need these two icons and their functionality on all my form fields.

I was hoping there were an easier way to add this functionality to generated html, and an easy way to add functionality (ng-click function) on them.

Edit: After reading through the docs again, I've figured out that I need to define my own custom field type (https://github.com/Textalk/angular-schema-form/blob/development/docs/extending.md)

From what I gather, I need to add the following to my modules config block:

schemaFormDecoratorsProvider.addMapping(
    'bootstrapDecorator',
    'custominput',
    'shared/templates/customInput.tpl.html',
    sfBuilderProvider.builders.sfField
);

I have also added the contents of shared/templates/customInput.tpl.html to $templatesCache.

But when I try to render a form, with a schema like

"schema": {
    "type": "object",
    "properties": {
        "firstName": {
            "title": "First name",
            "type": "string"
        },
        "lastName": {
            "title": "Last name",
            "type": "custominput"
        },
        "age": {
            "title": "Age",
            "type": "number"
        }
    }
}

I only see the first field (firstName) and age. The custom type is just ignored.

I have tried to debug my way to the problem, but as far as I can see, the custom field is correctly added to the decorator. I've tried to console.log the schemaFormDecoratorsProvider.decorator() and there I can see my custom field type.

I've also tried to fire off a $scope.$broadcast('schemaFormRedraw') in my controller, but I still only see the built in field types.

As a test, I've tried to define my own decorator, overwriting the default Bootstrap decorator:

schemaFormDecoratorsProvider.defineDecorator('bootstrapDecorator', {           
    'customType': {template: 'shared/templates/customInput.tpl.html', builder: sfBuilderProvider.stdBuilders},
    // The default is special, if the builder can't find a match it uses the default template.
    'default': {template: 'shared/templates/customInput.tpl.html', builder: sfBuilderProvider.stdBuilders},
}, []);

I would expect to see all fields to be rendered the same, since I only define a default type and my own custom type. But still, I only see built in types rendered, my custominput is till just ignored.

What am I missing?

Answer 1

I've had this same problem, the problem is that you should not confuse the JSON schema with the form definition.

To render a custom component you have to change the form definition. I.e in your controller your standard form defintion might look something like:

$scope.form = [
    "*",
    {
      type: "submit",
      title: "Save"
    }
  ];

You'll have to change this to:

$scope.form = [
    "firstName",
    "age",
    {
        key:"lastName",
        type:"customInput"
    },
    {
      type: "submit",
      title: "Save"
    }
  ];