Creating a custom widget

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

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