如何在 formBuilder 中添加条件验证器 Angular

Question

在 Angular 7.x 中使用 formBuilder 和 ReactiveForms，我试图将验证器放入基于用户角色的表单中。所以当用户有不同的role时，需要在字段中输入he/she。我将此用户存储在存储在 class.

中的变量中

我不想将验证器放在 valueChange 的订阅上，而是放在初始构建上。我怎么能这样做？下面是一些代码。

 buildForm(): void {
    this.accountForm = this.formBuilder.group({
      firstName: [this.user.firstName, Validators.required],
      initials: [this.user.initials, Validators.required],
      lastNamePrefix: [this.user.lastNamePrefix],
      lastName: [this.user.lastName, Validators.required],
      cellPhoneNumber: [this.user.cellPhoneNumber], <-- make this one required if the role of the user is x
      ]),
    });
  }

Answer 1

假设验证器设置后用户的角色不会改变，方法如下：

import {ValidatorFn, Validators} from '@angular/forms';

function createCellPhoneValidator(user: FooUser): ValidatorFn {
  return user.role === x ? Validators.required : Validators.nullValidator;
}

export class FooComponent {
  buildForm(): void {
    this.accountForm = this.formBuilder.group({
      firstName: [this.user.firstName, Validators.required],
      initials: [this.user.initials, Validators.required],
      lastNamePrefix: [this.user.lastNamePrefix],
      lastName: [this.user.lastName, Validators.required],
      cellPhoneNumber: [this.user.cellPhoneNumber, createCellPhoneValidator(this.user)],
    });
  }
}

如果角色可以更改，则每次执行验证之前都需要重新评估角色。可以这样做：

import {ValidatorFn, Validators} from '@angular/forms';

export class FooComponent {
  buildForm(): void {
    this.accountForm = this.formBuilder.group({
      firstName: [this.user.firstName, Validators.required],
      initials: [this.user.initials, Validators.required],
      lastNamePrefix: [this.user.lastNamePrefix],
      lastName: [this.user.lastName, Validators.required],
      cellPhoneNumber: [this.user.cellPhoneNumber, this.cellPhoneValidator],
    });
  }

  private readonly cellPhoneValidator: ValidatorFn = c => {
     return this.user.role === "x" ? Validators.required(c) : Validators.nullValidator(c);
   }
}

如何在 formBuilder 中添加条件验证器 Angular

How to add conditional validators in formBuilder Angular

forms

angular

angular-reactive-forms