Angular -schema-form: add custom html to form fields

Question

I was just starting to learn angular -schema-form, so this might be something that I missed in the docs or description.

I am trying to add an icon next to the label of the generated form fields and next to the field itself. For instance:

But from the angular -schema-form form will be generated:

I know that I can create my own field types, but is that so? This will require me to override all types of fields in the user version, because I need these two icons and their functionality in all my form fields.

I was hoping there is an easier way to add this functionality to the generated html and an easier way to add functionality (ng-click function) to them.

Edit: after reading the documents again, I found out that I needed to define my own field type ( https://github.com/Textalk/angular-schema-form/blob/development/docs/extending.md )

From what I'm building, I need to add the following to the module configuration block:

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

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

But when I try to display a form with a scheme like

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

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

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

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

As a test, I tried to define my own decorator by 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 expect all fields to be displayed the same way, since I only define the default type and my own custom type. But nonetheless, I see only built-in types, my user interface as long as it is simply ignored.

What am I missing?

Answer 1

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

To display a custom component, you need to change the definition of the form. In your controller, your standard definition form might look something like this:

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

You will need to change this to:

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