typescript 如何在角React式中使用required-if?

2w3rbyxf  于 2023-01-27  发布在  TypeScript
关注(0)|答案(3)|浏览(132)

我有一个React式表单,基于属性fooRequired,我想将字段设置为必填或非必填。
我不能改变它,因为它是初始设定的。那我该怎么办?

fooRequired = false;

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

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

qrjkbowd1#

下面的方法可以解决这个问题:

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

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

a5g8bdjr

a5g8bdjr2#

您可以使用一个负责添加或删除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将帮助您实现上述答案

whlutmcx

whlutmcx3#

你需要根据fooRequired变量为foo表单控件使用setValidator()updateValueAndValidity(),这两个函数将动态更新验证。
演示:https://stackblitz.com/edit/angular-setvalidators-jec7jo?file=src%2Fapp%2Fapp.component.ts
更多阅读内容:https://www.tektutorialshub.com/angular/how-to-add-validators-dynamically-using-setvalidators-in-angular/

相关问题