如何在 Angular Reactive Forms 中执行 required-if ？

Question

我有一个反应式表单，并根据fooRequired我想要将字段设置为必填或非必填的属性。

我无法更改它，因为它是初始设置的。那我能做什么呢？

fooRequired = false;

form = new FormGroup({

 foo: new FormControl(null, [Validators.required])

});

toggle() { this.fooRequired = !this.fooRequired; }

Answer 1

下面的方法可以解决这个问题：toggle() {  this.fooRequired = !this.fooRequired;  this.form.controls.foo.setValidators(this.fooRequired ? null : [Validators.required]);  this.form.controls.foo.updateValueAndValidity();}在这里，根据fooRequired布尔值，设置或删除验证器。最后，更新了新的表单控件设置。

Answer 2

您可以使用自定义函数来负责添加或删除Validatorsexport function conditionalValidator(  predicate: BooleanFn,  validator: ValidatorFn,  errorNamespace?: string): ValidatorFn {  return formControl => {    if (!formControl.parent) {      return null;    }    let error = null;    if (predicate()) {      error = validator(formControl);    }    if (errorNamespace && error) {      const customError = {};      customError[errorNamespace] = error;      error = customError;    }    return error;  };}然后你可以在表单控件中使用它：this.myForm = this.fb.group({  myEmailField: [    "",    [      // some normal validatiors      Validators.maxLength(250),      Validators.minLength(5),      Validators.pattern(/.+@.+\..+/),      // custom validation      conditionalValidator(        // depends on fooRequired value        () => this.fooRequired,        Validators.required,        "illuminatiError"      )    ]  ]});最后您可以切换 的值fooRequired并查看结果：  toggle() {    this.fooRequired = !this.fooRequired;    this.myForm.get("myEmailField").updateValueAndValidity();  }

Answer 3

您需要根据 fooRequired 变量对 foo 表单控件使用setValidator()和。updateValueAndValidity()这两个函数将动态更新验证。