Как обернуть элемент управления в пользовательский ControlValueAccessor с учетом проверки

Question

У меня есть matDatePicker, который я использую по всему приложению с реактивными формами, например:

<mat-form-field>
    <input formControlName="ratingDate" matInput [matDatepicker]="picker1" 
         placeholder="Rating Date" (dateInput)="performnCustomValidation)">
    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
    <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

Однако, есть ошибка проверки, которую мне нужно исправить с помощью некоторой дополнительной обработки событий:

performnCustomValidation(event: MatDatepickerInputEvent<Date>) {
  var strValue = (event.targetElement as HTMLInputElement).value
  if (event.value === null && strValue) {
    this.dateFormControl.setErrors({ isDate: true }, { emitEvent: true});
  }
}

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

Как заставить проверку работать в моем компоненте обертки, как это было раньше?

Это означает, что он должен уважать

1. встроенную проверку matDatePicker
2. валидаторы FormControl
3. мою пользовательскую ошибку валидации
4. Состояние проверки должно отражаться тем же визуалом, что и раньше

Пока у меня есть это, но проверки нет

@Component({
  selector: 'app-date-picker',
  template: `
<mat-form-field class="large-input" floatLabel="always">
    <input #input1 matInput [matDatepicker]="picker1" (dateChange)="performCustomValidation($event)">
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>`,
  styleUrls: ['./date-picker.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => DatePickerComponent),
      multi: true
    }
  ]
})
export class DatePickerComponent implements ControlValueAccessor, AfterViewInit {

  @ViewChild(MatInput) matInput;
  @ViewChild('input1') input;


  private control: FormControl;

  onChange: any = (date: Date) => { };
  onTouched: any = () => { };

  constructor(private injector: Injector,
  ) {

   }

  // The form control is only set after initialization
  ngAfterViewInit(): void {
    const ngControl: NgControl = this.injector.get(NgControl, null);
    if (ngControl) {
      this.control = ngControl.control as FormControl;
    } else {
    }
  }


  performnCustomValidation(event: MatDatepickerInputEvent<Date>) {
    var strValue = (event.targetElement as HTMLInputElement).value
    if (event.value === null && strValue) {
      this.dateFormControl.setErrors({ isDate: true }, { emitEvent: true});
    }
  }

  writeValue(value) {
    this.matInput.value = value;
  }

  registerOnChange(fn) {
    this.onChange = fn;
  }
  // We implement this method to keep a reference to the onTouched
  //callback function passed by the forms API
  registerOnTouched(fn) {
    this.onTouched = fn;
  }
}