How to merge validation error of matDatepicker and parent form

I'm currently building custom month picker component using the Datepicker from angular material library.The month picker should be able to use with reactive form like this.

app.component.ts

form = this.fb.group({
startMonth: [<Moment | null>null, [Validators.required]],
});


app.component.html

<form [formGroup]="form" novalidate (ngSubmit)="onSubmit()">
<app-month-picker-control
cssClass="w-100"
formControlName="startMonth"
appearance="outline"
label="start month" placeholder="please select month">
</app-month-picker-control>
</form>


The following is the html of the month picker.

month-picker.component.ts

<mat-form-field [appearance]="appearance" [class]="cssClass">
<mat-label>{{ label }}</mat-label>
<input
matInput
[matDatepicker]="dp"
[formControl]="date"
[placeholder]="placeholder"
(dateChange)="dateChangeHandler($event)"
/>
<mat-hint>YYYY/MM</mat-hint>
<mat-datepicker-toggle matIconSuffix [for]="dp"></mat-datepicker-toggle>
<mat-datepicker
#dp
startView="multi-year"
(monthSelected)="setMonthAndYear($event, dp)"
panelClass="month-picker"
>
</mat-datepicker>
@if(date.hasError('matDatepickerMax')) {
<mat-error>Please enter the right format</mat-error>
}

<mat-error>the start month is required</mat-error>
</mat-form-field>


since the matDatepicker has it own built in validation (like "matDatepickerParse" error whenever the input format is wrong) I need to show error message for that.

the component should be in error state and show the correspond error message whenever the build in validation error happen or the validation set on the parent form.

here is the stackblitz example

How do show the "the start month is required" message only when the binding control has the required error and set the error state of the input so?

or maybe should propagate the matDatepickerParse error to parent form?

Continue reading...