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 an Formly FieldType component.

@Component({
 selector: 'formly-date-input',
 template: `
   <kendo-datepicker [formControl]="formControl" [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: [ BrowserModule, BrowserAnimationsModule, IntlModule, DateInputsModule, FormlyModule.forRoot({
    types: [
        { name: 'date', component: FormlyDateInput },
      ]
  }),

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.

import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormlyFieldConfig } from '@ngx-formly/core';

@Component({
    selector: 'my-app',
    template: `
         <h3>@ngx-formly/kendo</h3>
    <form [formGroup]="form" (ngSubmit)="submit(model)" class="k-form">
      <formly-form [model]="model" [fields]="fields">
        <button type="submit" class="k-button">Submit</button>
      </formly-form>
    </form>
    `
})
export class AppComponent {
  form = new FormGroup({});
  model = { email: 'email@gmail.com', date: new Date() };
  fields: FormlyFieldConfig[] = [{
    key: 'email',
    type: 'input',
    templateOptions: {
      type: 'email',
      label: 'Email address',
      placeholder: 'Enter email',
      required: true,
    }
  }, {
    key: 'date',
    type: 'date'
  }];

  submit(user) {
    console.log(user);
  }
}
import { Component } from '@angular/core';
import { FieldType } from '@ngx-formly/core';

@Component({
    selector: 'formly-date-input',
    template: `
      <kendo-datepicker [formControl]="formControl" [formlyAttributes]="field"></kendo-datepicker>
    `,
   })
   export class FormlyDateInput extends FieldType {}
   
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IntlModule } from '@progress/kendo-angular-intl';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { ReactiveFormsModule } from '@angular/forms';
import { FormlyModule } from '@ngx-formly/core';
import { FormlyKendoModule } from '@ngx-formly/kendo';
import { AppComponent } from './app.component';
import { FormlyDateInput }   from './date-field.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, IntlModule, DateInputsModule, FormlyModule.forRoot({
    types: [
        { name: 'date', component: FormlyDateInput },
      ]
    }),
    FormlyKendoModule, ReactiveFormsModule ],
  declarations: [ AppComponent, FormlyDateInput ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }
import { enableProdMode, NgModule } from '@angular/core';
import { AppModule } from './app.module.ts';

enableProdMode();

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

In this article