Шаблон реактивных форм углового материала - как сделать компонент для этого шаблона с помощью ControlValueAccessor

Есть два способа сделать это — простой и сложный. Сложный способ — реализовать ControlValueAccessor, и это дает вам больше гибкости в том, как можно использовать компонент. Самый простой способ — просто передать вещи через ваш компонент фактическим элементам формы внутри. Если вам не нужна гибкость в использовании этого компонента, выберите простой путь.

Однако сначала вам нужно отказаться от идеи использования mat-error вне mat-form-control. Это просто не будет работать, и вам это не нужно для работы. Оставьте его внутри поля формы и укажите вместо него содержимое. Наряду с этим применяйте логику ошибок к содержимому mat-error, а не к самому mat-error. И помните, что вам не нужна логика для отображения mat-error — поле формы автоматически позаботится об этом, когда в элементе управления формы возникает ошибка. Вам нужна только логика, чтобы определить, каким должно быть содержимое ошибки.

Простая оболочка для mat-form-field будет выглядеть примерно так:

my-form-field.html

<mat-form-field>
  <input matInput type="text" [placeholder]="placeholder" [formControl]="myFormControl" required>
  <mat-error>
    <ng-content></ng-content>
  </mat-error>
</mat-form-field>

моя-форма-field.ts

import {Component, Input} from '@angular/core';
import {FormControl} from '@angular/forms';

@Component({
  selector: 'my-form-field',
  templateUrl: 'my-form-field.html'
})
export class MyFormField {
  @Input() myFormControl: FormControl;
  @Input() placeholder: string;
}

использование

custom-form-field-example.html

<form [formGroup]="formGroup">
  <my-form-field placeholder="Name" [myFormControl]="formGroup.get('name')">
    <ng-container *ngIf="formGroup.get('name').hasError('required')">
     This field is required
    </ng-container>
    <ng-container *ngIf="formGroup.get('name').hasError('serverValidation')">
      Server validation failed
    </ng-container>
  </my-form-field>
</form>

custom-form-field-example.ts

import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {ServerValidation} from '...';

@Component({
  selector: 'custom-form-field-example',
  templateUrl: 'custom-form-field-example.html'
})
export class CustomFormFieldExample {
  formGroup: FormGroup;

  constructor(formBuilder: FormBuilder) {
    this.formGroup = formBuilder.group({
      name: ['', [Validators.required, ServerValidation]]
    });
  }
}