为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕的地10843 2023-08-24 17:14:40
我有一个反应式表单,并根据fooRequired我想要将字段设置为必填或非必填的属性。我无法更改它,因为它是初始设置的。那我能做什么呢?fooRequired = false;form = new FormGroup({ foo: new FormControl(null, [Validators.required])});toggle() { this.fooRequired = !this.fooRequired; }
查看完整描述

3 回答

?
开心每一天1111

TA贡献1836条经验 获得超13个赞

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


toggle() {

  this.fooRequired = !this.fooRequired;

  this.form.controls.foo.setValidators(this.fooRequired ? null : [Validators.required]);

  this.form.controls.foo.updateValueAndValidity();

}

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


查看完整回答
反对 回复 2023-08-24
?
慕田峪4524236

TA贡献1875条经验 获得超5个赞

您可以使用自定义函数来负责添加或删除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();

  }


查看完整回答
反对 回复 2023-08-24
?
RISEBY

TA贡献1856条经验 获得超5个赞

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

查看完整回答
反对 回复 2023-08-24
  • 3 回答
  • 0 关注
  • 122 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信