Forms Support

You can use the MultiViewCalendar in Template-driven and Reactive forms.

The component accepts Date values and updates the model each time a selection is changed.

Template-Driven Forms

The template-driven forms enable you to bind the MultiViewCalendar to the model by using the ngModel directive.

The following example demonstrates how to accomplish a two-way binding by using the ngModel directive.

@Component({
  selector: 'my-app',
  styles: ['.k-invalid { color: red; padding: 5px 0; }'],
  template: `
    <div class="example-config">
        Form value: {{ form.value | json }}
    </div>

    <form #form="ngForm">
      <kendo-multiviewcalendar name="date" [(ngModel)]="model.date" #date="ngModel" required></kendo-multiviewcalendar>
      <div [hidden]="date.valid" class="k-invalid">Date required. Please select one.</div>
    </form>
  `
})
class AppComponent {
    public model: any = { date: undefined };
}

Reactive Forms

The FormGroup decorator provides a way to render reactive forms. For more details, refer to the Angular documentation.

The following example demonstrates how to use the MultiViewCalendar in a reactive form.

import {
    FormsModule,
    ReactiveFormsModule,
    FormGroup,
    FormControl,
    Validators
} from '@angular/forms';

@Component({
  selector: 'my-app',
  styles: ['.k-invalid { color: red; padding: 5px 0; }'],
  template: `
    <div class="example-config">
        Form value: {{ form.value | json }}
    </div>

    <form [formGroup]="form">
      <kendo-multiviewcalendar formControlName="date" required></kendo-multiviewcalendar>
      <div [hidden]="isDateValid()" class="k-invalid">Date required. Please select one.</div>
    </form>
  `
})
class AppComponent {
    public form: FormGroup;

    constructor() {
        this.form = new FormGroup({
            date: new FormControl(null, Validators.required)
        });
    }

    public isDateValid(): boolean {
        return this.form.controls.date.valid;
    }
}

FormField Association

The following example demonstrates the usage of the MultiViewCalendar within a FormField with hint and error messages.

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { getDate, Day } from '@progress/kendo-date-math';
import { SelectionRange } from '@progress/kendo-angular-dateinputs';

@Component({
    selector: 'my-app',
    template: `
        <div class="example">
            <form class="k-form" [formGroup]="form">
                <kendo-formfield>
                    <kendo-label [for]="appointment" text="Select Range"></kendo-label>
                    <kendo-multiviewcalendar
                        #appointment
                        kendoDateRangeSelection
                        [(selectionRange)]="range"
                        [disabledDatesRangeValidation]="true"
                        [formControlName]="'appointment'"
                        [min]="today"
                        [disabledDates]="disabledDates"
                    >
                    </kendo-multiviewcalendar>
                    <kendo-formhint>Select a work-days range</kendo-formhint>
                    <kendo-formerror>
                        <span *ngIf="form.controls.appointment.hasError('required')">Requried</span>
                        <span *ngIf="form.controls.appointment.hasError('disabledDatesInRange')">The selection should not include weekend days</span>
                    </kendo-formerror>
                </kendo-formfield>
            </form>
        </div>
    `
})
export class AppComponent {
    public form: FormGroup = new FormGroup({
        appointment: new FormControl(null, Validators.required)
    });

    public today: Date = getDate(new Date());

    public range: SelectionRange = { start: null, end: null };

    public disabledDates: Day[] = [Day.Saturday, Day.Sunday];
}
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { LabelModule } from '@progress/kendo-angular-label';

import { AppComponent } from './app.component';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        DateInputsModule,
        ReactiveFormsModule,
        InputsModule,
        LabelModule
    ]
})
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article