How to detect input errors on Angular Material Datepicker with MomentDateAdapter?

Question

Currently when a user enters invalid data in a datepicker input, it is not marked as ng-invalid but instead the underlying value is being set to null when the form is saved.

Our QA person is not satisfied with this behavior. The user should be notified about the wrong input value and shouldn't be able to save the data until the input value is corrected.

Is there any easy way to fix this?

The date picker already knows the input value cannot be successfully parsed, so why shouldn't it mark the field as invalid? I really wouldn't want to duplicate date parsing functionality in a custom parser or a validation rule.

I'm using moment.js adapter with non-English locale and format. Here are my date picker localization settings, in case if they are somehow relevant to the issue:

{
    provide: MAT_DATE_LOCALE, useValue: 'lv'
},
{
    provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS,
    // treat all dates as UTC to avoid shifting dates to browser's timezone
    useValue: { useUtc: true }
},
{
    provide: DateAdapter,
    useClass: MomentDateAdapter,
    deps: [
        MAT_DATE_LOCALE,
        MAT_MOMENT_DATE_ADAPTER_OPTIONS
    ]
},
{
    provide: MAT_DATE_FORMATS,
    useValue: {
        parse: {
            dateInput: DEFAULT_DATE_FORMAT
        },
        display: {
            dateInput: DEFAULT_DATE_FORMAT,
            monthYearLabel: 'MMMM YYYY',
            dateA11yLabel: DEFAULT_DATE_FORMAT,
            monthYearA11yLabel: 'MMMM YYYY'
        }
    }
}

// DEFAULT_DATE_FORMAT is defined as "DD.MM.YYYY"

The HTML code:

<mat-form-field>
    <mat-label>My date field</mat-label>
    <input matNativeControl
           name="validTo" formControlName="validTo"
           matInput [matDatepicker]="validToPicker" placeholder="DD.MM.YYYY">
    <mat-datepicker-toggle matSuffix [for]="validToPicker"></mat-datepicker-toggle>
    <mat-datepicker touchUi #validToPicker></mat-datepicker>
    <mat-error>
        <validation-field name="validTo" [form]="form"></validation-field>
    </mat-error>
</mat-form-field>

validation-field component is a custom component that displays all the form errors for the fields. It works well for every other case, for example, for Required validator, but it doesn't detect any form errors for incorrect datepicker input. The input isn't even marked as ng-invalid when incorrect data is entered.

Answer 1

I'd recommend adding a custom validator to the form-control. If you aren't using reactive forms, I'd recommend it(more performant). DEMO

export class DatepickerOverviewExample {
  exampleForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.exampleForm = this.fb.group({
      date: ['', [Validators.required, CustomValidators.validateDate]]
    });
  }

}


export class CustomValidators {
  static validateDate(control: AbstractControl): object | null {
    if (!control) {
      return;
    }
    const isDateValid = true; // test date
    return isDateValid ? {
      dateInValid: true
    } : null;
  }
}

<mat-form-field [formGroup]="exampleForm">
  <input matInput formControlName='date' [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<div class="error" *ngIf="exampleForm.controls.date.touched && exampleForm.controls.date?.hasError('dateInValid')">
  Invalid Date!
</div>