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

Question

работа с угловыми материалами mat-form-field и реактивными формами.В проекте у меня есть повторяющийся шаблон, который выглядит следующим образом:

// ts
this.formGroup = this.formBuilder.group({
    name: ['', ServerValidation]
})

<!-- html -->
<div [formGroup]="formGroup">
  <mat-form-field>
    <input
      matInput
      formControlName="name"
      [placeholder]="'Name'"
      name="name"
     />
    <mat-error
     *ngIf="
       formGroup
       .get('name')
       .hasError('serverValidation')
       "
      >
      {{
       formGroup
       .get("name")
       .getError("serverValidation")
      }}
     </mat-error>
   </mat-form-field>
</div>

Это высокий уровень - при условии, что я могу получать ошибки проверки с сервера - как я могу повторить этот шаблон http-шаблона в компоненте?У меня есть догадка, что я должен использовать ControlValueAccessor - но не знаю, как это сделать.

Реализация, которую я представляю, может выглядеть примерно так

<!-- html -->
<div [formGroup]="formGroup">
  <serverValidatedInput formControlName="'name'">
    <mat-error>error message for client side validation</mat-error>
  </serverValidatedInput>
</div>

Так что, по сути, я хочу использовать этот пользовательский компонент как обычный материал ввода (более или менее), за исключением того, что он приходитс ошибкой проверки сервера по умолчанию.Кто-нибудь может дать мне какое-то направление здесь - спасибо.:)

Answer 1

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

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

Простая оболочка для 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>

my-form-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]]
    });
  }
}