Angular：如何有条件地为响应式表单应用验证器

Question

我正在使用 Reactive 表单并以这种方式声明表单。

constructor(
    private fb: FormBuilder) {
  }
public ngOnInit(): void {
    let ipRegex = /^([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3})*$/;
    let form = {
    ipaddress: ['', [Validators.required, Validators.pattern(ipRegex)]],
    port: ['', [Validators.required]],
    username: ['', [Validators.required]],
    password: ['', [Validators.required]],
    enablepassword: ['']
    };

    this.deviceForm = this.fb.group(form);
  }

我想根据方法提供的布尔条件使密码表单字段成为必填项。我试图将该方法直接放在 Validators.required 旁边，如 [Validators.required、this.myFunction()] as this.myFunction returns 布尔值。但我收到错误。如何解决这个问题？

Answer 1

Angular 表单有一个内置函数 setValidators() 可以启用验证器的编程分配。

对于您的示例，您可以这样做：

if(someBool){
this.deviceForm.controls['password'].setValidators([Validators.required]);
}

Angular：如何有条件地为响应式表单应用验证器

Angular: How to conditionally apply Validators for Reactive forms

angular

angular-reactive-forms