Элемент управления пользовательской формы Angular6 с ошибками проверки (mat-error)

Question

Как сделать элемент управления настраиваемым полем формы Материал ( как этот ) для поддержки проверки формы и отображения их с ошибкой mat?Я понимаю, что обычная директива matInput использует ErrorStateMatcher ( doc ), но я не понимаю, как связать ее с настраиваемым полем формы.

Answer 1

Посмотрев на какой-либо существующий компонент из Material2 (https://github.com/angular/material2/blob/master/src/lib/select/select.ts),, я нашел решение. Я создал базовый класс, следуя этому примеру

export const _MatSelectMixinBase:
CanDisableCtor &
HasTabIndexCtor &
CanDisableRippleCtor &
CanUpdateErrorStateCtor &
typeof MatSelectBase =
    mixinDisableRipple(mixinTabIndex(mixinDisabled(mixinErrorState(MatSelectBase))));

Мне пришлось скопировать из репозитория материалов некоторые типыкак CanUpdateErrorStateCtor.

Затем обновите мой конструктор, чтобы добавить ErrorStateMatcher и, наконец, в ngDoCheck, сделайте следующее:

ngDoCheck() {
   if (this.ngControl) {
      this.updateErrorState();
   }
}

Answer 2

вы можете проверить, что из FocusMonitor в примере, это может быть что-то вроде этого:

  fm.monitor(elRef.nativeElement, true).subscribe(origin => {
    if (this.parts.status === 'INVALID') {
      this.errorState = true;
    }
    this.focused = !!origin;
    this.stateChanges.next();
  });

идея материальна, предоставьте errorState, вы можете увидеть это изтип компонента, поэтому при каждом его изменении он будет отражаться на компоненте, надеюсь, это поможет!