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步：使用表单的错误消息创建const

为每个表单字段验证程序创建一条错误消息。以下是包含三个字段的表单示例：名称，电子邮件，密码。

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) { }

第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步：修改表单模板

现在，您可以在模板中使用errors vairable来输出错误消息：

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

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

此解决方案的优点：

易于
准备好进行错误翻译
使用自定义验证程序

通过Switch Case处理Angular ReactiveForm错误

1 个答案: