Formly Integration
Environment
| Product | Progress® Kendo UI for Angular |
Description
How can I integrate Kendo UI for Angular components with the Formly library?
Solution
Kendo UI for Angular supports integration with the form-generating Formly library which is available out-of-the-box.
For more information on the available integration approach, refer to the official Formly documentation.
You can further extend the basic integration capabilities by creating custom Formly fields and placing Kendo UI for Angular components inside them:
Creating the Custom Date Form Field
To create a custom date form field, wrap a Kendo UI for Angular DatePicker component in a Formly FieldType component.
@Component({
selector: 'formly-date-input',
template: `
<kendo-datepicker [formlyAttributes]="field"></kendo-datepicker>
`,
})
export class FormlyDateInput extends FieldType {}Registering the Custom Field Type
To register the newly created custom type, use the FormlyModule.
@NgModule({
imports: [
...
FormlyModule.forRoot({
types: [{ name: "date", component: FormlyDateInput }],
}),
FormlyKendoModule,
ReactiveFormsModule,
]
})Configuring the Form Field
You can configure the form field from the custom control which is now available as a date type in the form configuration object.
fields: FormlyFieldConfig[] = [{
key: 'date',
type: 'date'
}];The following example demonstrates the described approach in action.