How to use mat-calendar with reactive forms?

Issue

I want to use a calendar component without an input in a reactive form.

I found the component mat-calendar and tried this:

<mat-calendar formControlName="appointment"></mat-calendar>

The corresponding TypeScript file has this:

this.form = this.formBuilder.group({ appointment: [''] });

But an error was shown:

ERROR Error: No value accessor for form control with name: 'appointment'

Solution

If you want to use this as a datepicker for a form, then using the Material datepicker is a better option, and it supports reactive form controls out of the box.

However, if you want a static calendar (i.e always visible), and just need to update your form when a user selects a value, then you can listen to it's change event, and set your form value yourself.

<mat-calendar [selected]="form.get('appointment').value" (selectedChange)="updateFormDate($event)"></mat-calendar>

updateFormDate(value: any) {
    this.form.get('appointment').setValue(value);
}

Answered By - prettyfly