Angular7 DatePicker в FormGroup не возвращает значение ошибки из CustomDateAdapter в значение formControl

Question

У меня есть DatePicker внутри FormGroup и я пытаюсь проанализировать дату с CustomDateAdapter, а затем проверить ее с помощью пользовательской функции проверки формы.

Я ввожу строку ошибки в свой DatePicker, это значение приходит в parse () - метод CustomDateAdapter, но после этого значение не попадает в функцию проверки пользовательской формы, и я вижу, что myForm.get ('validFrom') .invalid: false и значение в NULL . Но в DatePicker я все еще вижу строку ошибки.

Итак, моя строка ошибки доходит до parse () CustomDateAdapter, но не доходит до функции проверки.

component.ts:

const initialValue = { value: null, disabled: true };

this.myForm = this.formBuilder.group({
      id: null,
      name: initialValue,
      email: [initialValue, [Validators.email]],
      validity: this.formBuilder.group({
        validFrom: [initialValue, [CustomValidators.dateValidator]],
        validTo: [initialValue,  [CustomValidators.dateValidator]],
      }, { validator: CustomValidators.dateDifferenceValidators('validFrom', 'validTo') })
    });

component.html:

<mat-card>
 <mat-card-content>

<form [formGroup]="myForm">
<mat-form-field >
            <input
              matInput
              formControlName="name"
              [placeholder]="name"
              required
            >
            <mat-error *ngIf="myForm.get('name').invalid">
              Error in name
            </mat-error>
          </mat-form-field>
<mat-form-field>
            <input
              matInput
              formControlName="email"
              [placeholder]="email"
            >
            <mat-error *ngIf="myForm.get('email').invalid">
              Error in email
            </mat-error>
          </mat-form-field>

<div formGroupName="validity">
<mat-form-field>
              <input
                matInput
                [matDatepicker]="fromPicker"
                formControlName="validFrom"
                [placeholder]="date">
              <mat-datepicker-toggle
                matSuffix
                [for]="fromPicker"
              ></mat-datepicker-toggle>
              <mat-datepicker #fromPicker></mat-datepicker>
              <mat-error *ngIf="siteForm.get('validity.validFrom').invalid">
                Error in dateFrom
              </mat-error>
            </mat-form-field>
            <mat-form-field>

              <input
                matInput
                [matDatepicker]="toPicker"
                formControlName="validTo"
                [placeholder]="date"
              >
              <mat-datepicker-toggle
                matSuffix
                [for]="toPicker"
              ></mat-datepicker-toggle>
              <mat-datepicker #toPicker></mat-datepicker>
              <mat-error *ngIf="siteForm.get('validity.validTo').invalid">
                Error in dateTo
              </mat-error>
            </mat-form-field>
            <div *ngIf="siteForm.hasError('dateDifference', 'validity')">
              Dates are not valid
            </div>
          </div>
</form>
 </mat-card-content>
</mat-card>

CustomDateAdapter.ts:

import { MomentDateAdapter } from '@angular/material-moment-adapter';
import {  MAT_DATE_LOCALE } from '@angular/material/core';
import { Inject, Injectable, Optional } from '@angular/core';
import * as moment from 'moment';

@Injectable()
export class CustomDateAdapter extends MomentDateAdapter {

    constructor(@Optional() @Inject(MAT_DATE_LOCALE) dateLocale: string) {
        super(dateLocale);
    }

    parse(value, parseFormat) {
        if (value && typeof value === 'string') {
            return moment.isMoment(value) && moment(value).isValid() ? moment(value, parseFormat) : null;
        }
        if (value && moment.isMoment(value)) {
            return moment(value, parseFormat).isValid() ? moment(value, parseFormat) : null;
        }
        if (value && moment.isDate(value) && !isNaN(value.valueOf())) {
            return moment(value, parseFormat);
        }

        return value ? moment(value).locale(this.locale) : null;
    }
}

dateValidator ():

export function dateValidator(control: AbstractControl): ValidationErrors {
  const currentDate = control.value;

  if (!currentDate) {
    return null;
  }

  if (moment.isMoment(currentDate) && moment(currentDate, 'D.M.YYYY').isValid()) {
    return null;
  }
  if (moment.isDate(currentDate) && !isNaN(currentDate.valueOf())) {
    return null;
  }

  return { 'invalidDate': { value: control.value } };
}

Пожалуйста, помогите мне разобраться в проблеме и как ее решить.