Formly Integration

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:

1. Create custom data form fields
2. Register the custom field type
3. Configure the form field

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.

ts

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

ts

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

ts

fields: FormlyFieldConfig[] = [{
    key: 'date',
    type: 'date'
  }];

The following example demonstrates the described approach in action.

Change Theme

Theme

Loading ...

Suggested Links

• Kendo UI for Angular DatePicker
• Official Formly Documentation
• Overview of Kendo UI Forms for Angular