通过 Switch Case 进行 Angular ReactiveForm 错误处理

Question

我有一个反应式表单，其中我使用 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

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

查看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')
];

errors第 4 步：在 component.ts 中创建变量

  myForm: FormGroup;

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

  constructor(private fb: FormBuilder) { }

步骤5：通过表单状态变化进行错误处理的函数

在此函数中，您可以迭代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 步：修改表单模板

现在你可以在模板中使用errorsvairable 来输出错误消息：

<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>

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

该解决方案的优点：

• 简单的
• 准备好错误翻译
• 与自定义验证器一起使用