Creating a custom widget

[ebrehault]

Question received by email:

I have a question regarding the angular2-schema-form repo. You say that it is possible to generate your own widget, sadly I don’t understand how and where I should begin. Could you give me some information or documentation regarding creating your own widget?

You need to derivate the widget you want to customize:

@Component({
  selector: 'mdl-sf-string-widget',
  templateUrl: './string.widget.html'
})
export class MyStringWidget extends StringWidget {}

You need to provide its html template (let's imagine we want to use the Material Design text field):

<mdl-textfield [label]="schema.description" type="string" floating-label 
    [name]="name" [attr.readonly]="schema.readOnly?true:null"
    [attr.id]="id"
    [attr.disabled]="schema.readOnly?true:null"
    [formControl]="control"></mdl-textfield>

And you need to declare it in a custom registry:

import { MyStringWidget } from './mystring';

export class MyWidgetRegistry extends DefaultWidgetRegistry {
  constructor() {
    super();

    this.register('string',  MyStringWidget);
  }
}

And then you need to provide your registry in your module:

providers: [{provide: WidgetRegistry, useClass: MyWidgetRegistry}],

Note: I will add this to the doc

[marc101101]

first: thanks for the answer. second: what is StringWidget?

[ebrehault]

Sorry, StringWidget can be imported from the angular2-schema-form package (the code is here: https://github.com/makinacorpus/angular2-schema-form/blob/master/src/defaultwidgets/string/string.widget.ts )

[manuelarte]

Hi, I created my own Widget:

<md-input-container>
    <input type="number" mdInput [name]="name" [formControl]="control" [placeholder]="schema.title"
               [attr.id]="id" [readonly]="schema.readOnly?true:null" [min]="0" [max]="90" [value]="value">
    <md-error>This time is not valid!</md-error>
</md-input-container>

Using material2, but when I get the json of the form and I can see that the properties that used that custom widget are not set.

[marc101101]

is your widget used? Do you see any changes in the ui? If not I assume your widget registry does not work correctly

[manuelarte]

Hi @marc101101 , I can see changes in the ui. The widget registration is working perfectly (well... not the binding to the value haha).

I edit the post saying that I can also see the [formControl]=control value changed