角度材料反应形式模式 - 如何使用 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-form-control 之外使用mat-error 的想法。它根本行不通，你也不需要它来工作。将其保留在表单字段中并为其提供内容。除此之外，将错误逻辑应用于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]]
    });
  }
}