通过 Switch Case 处理 Angular Reactive Form 错误

Question

我有一个响应式(Reactive)表单，我在其中使用 ngif 验证不同的字段。

例如:

  <mat-form-field>
  <input  matInput formControlName="name" placeholder="Name">
  <mat-error 
  *ngIf="personForm.get('name').hasError('required')">Name is 
   empty</materror>
  <mat-error *ngIf="personForm.get('name').hasError('minlength')">Needs more 
   than 3 characters</mat-error>
  </mat-form-field>

是否可以在 switch case 语句中做同样的事情？如何继续这样做？

我想象的是这样的

validateErrors {
  switch(errorHandling) {
  case 1: 'Name is empty';
  case 2: 'Needs more than 3 characters';
  }
}

如何让 mat-errors 显示这些不同的情况？任何指导将不胜感激，谢谢!

Answer 1

我推荐另一种方法来处理响应式(Reactive)表单中的验证错误。

查看 stackblitz 上的工作示例.

这是一个例子:

第 1 步:创建类 ErrorMessage

此类是 ErrorMessage 的模型，您将在表单模板中使用它。

export class ErrorMessage {
  constructor(
    public forControl: string,
    public forValidator: string,
    public text: string
  ) { }
}

第 2 步:创建您的 FormGroup

  myForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.createForm();
  }

  createForm() {
    this.myForm = this.fb.group({
      name: [null, [Validators.required, Validators.maxLength(255)]],
      email: [null, [Validators.required, Validators.email, Validators.maxLength(255)]],
      password: [null, [Validators.required, Validators.minLength(12)]]
    });
  }

第 3 步:为您的表单创建包含错误消息的常量

为每个表单字段验证器创建一条错误消息。下面是一个包含三个字段的表单示例:姓名、电子邮件、密码。

import { ErrorMessage } from './error-message';

export const MyFormErrorMessage = [
  new ErrorMessage('name', 'required', 'Name is required'),
  new ErrorMessage('name', 'maxlength', 'Name should have maximal 255 chars'),
  new ErrorMessage('email', 'required', 'Email is required'),
  new ErrorMessage('email', 'email', 'Email is not valid'),
  new ErrorMessage('email', 'maxlength', 'Email should have maximal 255 chars'),
  new ErrorMessage('password', 'required', 'Password is required'),
  new ErrorMessage('password', 'minlength', 'Password should have minimal 12 chars')
];

第 4 步:在您的 component.ts 中为 errors 创建变量

  myForm: FormGroup;

  errors: { [key: string]: string } = {};

  constructor(private fb: FormBuilder) { }

第五步:表单状态变化错误处理函数

在此函数中，您迭代 MyFormErrorMessage 并获得对每个表单字段的控制。之后检查控件是否有效，并将错误消息添加到 errors 变量。

  updateErrorMessages() {
    this.errors = {};
    for (const message of MyFormErrorMessage) {
      const control = this.myForm.get(message.forControl);
      if (control &&
          control.dirty &&
          control.invalid &&
          control.errors[message.forValidator] &&
          !this.errors[message.forControl]) {
        this.errors[message.forControl] = message.text;
      }
    }
  }

第 6 步:订阅 myForm statusChanges 并运行 updateErrorMessages 函数

添加这个:

this.myForm.statusChanges.subscribe(() => this.updateErrorMessages());

到createForm():

  createForm() {
    this.myForm = this.fb.group({
      name: [null, [Validators.required, Validators.maxLength(255)]],
      email: [null, [Validators.required, Validators.email, Validators.maxLength(255)]],
      password: [null, [Validators.required, Validators.minLength(12)]]
    });
    this.myForm.statusChanges.subscribe(() => this.updateErrorMessages());
  }

第 7 步:修改表单模板

现在你可以使用模板中的errors变量来输出错误信息:

<form [formGroup]="myForm" (onSubmit)="submitForm()">
  <div class="form-group" 
       [class.has-error]="errors.name"
       [class.has-success]="!errors.name && myForm.controls['name'].value">
    <label for="name">Name</label>
    <input type="text" id="name" formControlName="name" required>
    <span class="help-text" *ngIf="errors.name">{{ errors.name }}</span>
  </div>
  <div class="form-group" 
       [class.has-error]="errors.email"
       [class.has-success]="!errors.email && myForm.controls['email'].value">
    <label for="email">Email</label>
    <input type="text" id="email" formControlName="email" required>
    <span class="help-text" *ngIf="errors.email">{{ errors.email }}</span>
  </div>
  <div class="form-group" 
       [class.has-error]="errors.password"
       [class.has-success]="!errors.password && myForm.controls['password'].value">
    <label for="password">Password</label>
    <input type="password" id="password" formControlName="password" required>
    <span class="help-text" *ngIf="errors.password">{{ errors.password }}</span>
  </div>
</form>

在我的项目中，我使用这种方式来处理来自验证器的错误。这种方式也适用于自定义验证器。

此解决方案的优点:

• 简单
• 准备错误翻译
• 使用自定义验证器