0

使用角材料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>

所以基本上我想像常规材料输入（或多或少）一样使用这个自定义组件，除了它默认带有服务器验证错误。谁能在这里给我一些指导-谢谢。:)

4

1 回答 1

0

有两种方法可以做到这一点 - 一种简单的方法和一种困难的方法。困难的方法是实现ControlValueAccessor，这为您在如何使用组件方面提供了更大的灵活性。简单的方法是通过组件将内容传递给内部的实际表单元素。如果您不需要灵活地使用此组件，请采用简单的方法。

不过，首先，您需要摆脱mat-error在mat-form-control. 它根本行不通，你也不需要它来工作。将其保留在表单字段中并为其提供内容。除此之外，将您的错误逻辑应用于 的内容mat-error，而不是其mat-error本身。请记住，您不需要显示 mat-error逻辑- 当表单控件出现错误时，表单字段会自动处理。您只需要逻辑来确定错误内容应该是什么。

一个简单的包装器mat-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>

我的表单字段.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;
}

用法

自定义表单字段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>

自定义表单字段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]]
    });
  }
}
于 2019-01-22T17:26:03.597 回答