如何在 Angular Reactive Forms 中做 required-if？答案

【问题标题】：How to do required-if in Angular Reactive Forms?如何在 Angular Reactive Forms 中做 required-if？
【发布时间】：2021-03-04 14:31:47
【问题描述】：

我有一个响应式表单，并且基于fooRequired 属性，我想将该字段设置为是否必填。

我无法更改它，因为它是初始设置的。那我该怎么办？

fooRequired = false;

form = new FormGroup({
 foo: new FormControl(null, [Validators.required])
});

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

【问题讨论】：

如果fooRequired 的值发生变化，您是否尝试过在ngOnChanges 中重新初始化form？

标签： javascript angular typescript angular-reactive-forms

【解决方案1】：

以下方法可以解决问题：

toggle() {
  this.fooRequired = !this.fooRequired;
  this.form.controls.foo.setValidators(this.fooRequired ? null : [Validators.required]);
  this.form.controls.foo.updateValueAndValidity();
}

这里，根据fooRequired 布尔值，设置或删除验证器。最后，更新了新的表单控件设置。

【讨论】：

【解决方案2】：

您可以使用自定义函数来负责添加或删除Validators

export 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();
  }

这里是a live demo 来帮助您实现上述答案

【讨论】：

【解决方案3】：

您需要使用setValidator() 和updateValueAndValidity() 来控制基于 fooRequired 变量的 foo 表单。这两个函数将动态更新验证。

演示：https://stackblitz.com/edit/angular-setvalidators-jec7jo?file=src%2Fapp%2Fapp.component.ts

【讨论】：