Пользовательские элементы управления с реактивными формами

Question

Я использую Angular 7, Angular Material control с реактивными формами.

Я создал пользовательский текст (matInput type = "text"), число (matInput type = "number"), элементы управления select (matSelect) с Angular Material с полем mat-form

Вот пример stackblitz для моего примера.

Я пытаюсь прикрепить пользовательские элементы управления формы к реактивной форме и пытаюсь автоматически запустить любые проверки в группе форм.

Я использую ControlValueAccessor для достижения этой цели, однако мой Select не идентифицируется как элемент управления формы, и никакое значение не записывается в элемент управления формы в форме.

Любая помощь в этом отношении высоко ценится.

Answer 1

Изучая ваш код, я вижу, что вы используете Angular Material для создания своего пользовательского FormControl. Что ж, проблема при использовании углового материала заключается в том, как сделать так, чтобы «ошибки» появлялись.

Когда мы используем <mat-error>, появляется ошибка, если элемент управления недействителен. Примите во внимание, что недействительным является наша пользовательская форма conrol, а НЕ входной материал. Как избежать этого неудобства?

Решение использует CustomFieldErrorMatcher. если мы можем создать CustomFiledErrorMatcher, который учитывает ошибки нашего customFormControl, мы можем сделать что-то вроде

class CustomFieldErrorMatcher implements ErrorStateMatcher {
  constructor(private customControl: FormControl) { }
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    return control.dirty && this.customControl.invalid;
  }
}

Ну, это только в ngAfterView написать что-то вроде

  ngAfterViewInit(): void {
    const ngControl: NgControl = this.injector.get(NgControl, null);
    if (ngControl) {
      setTimeout(() => {
        this.control = ngControl.control as FormControl;
      })
    }
  }

Имеет функцию

errorMatcher() {
    return new CustomFieldErrorMatcher(this.control)
  }

И создайте наш custom-formControl.html как

<mat-form-field>
    <mat-select [ngModel]="value" (ngModelChange)="value=$event;onChange($event)" 
          [placeholder]="placeholder" [disabled]="disabled"
          [errorStateMatcher]="errorMatcher()">
        <mat-option *ngFor="let option of optionList" [value]="option.value">
            {{ option.label }}
        </mat-option>
    </mat-select>
  <mat-error *ngIf="control?.hasError('required')">Required</mat-error>
  <mat-error *ngIf="control?.hasError('error')">{{control?.errors.error}}</mat-error>
</mat-form-field>

Вы можете видеть в stackblitz две формы, одну, которая использует customFormControl, и другую в классическом режиме