Angular：有条件地改变 FormControl答案

【问题标题】：Angular : Conditionally changing FormControlAngular：有条件地改变 FormControl
【发布时间】：2018-03-20 06:19:40
【问题描述】：

我正在创建一个基于切换值的 formGroup 验证

public toggle:boolean=false;


ngOnInit(): void {
          this.formGroup = this.formBuilder.group({
          formArray: this.formBuilder.array([
            this.formBuilder.group({
              toggleFormCtrl: [this.toggle, null],
              fnameFormCtrl: ['', this.checkInputs.bind(this)],
              lnameFormCtrl: ['', this.checkInputs.bind(this)],
              addressFormCtrl: ['', this.checkMiInput.bind(this)]
            }),
         ])
       });

  }

checkInputs(c: FormControl) {
if (this.toggle) {
  return c.value === '' ? null : {
    checkinputs: {
      valid: false
    }
  };
} else {
  return c.value ? null : {
    checkinputs: {
      valid: false
    }
  };
}

}



checkMiInput(c: FormControl) {
    if (this.toggle) {
      return c.value ? null : {
        checkMiInput: {
          valid: false
        }
      };
    } else {
      return c.value === '' ? null : {
        checkMiInput: {
          valid: false
        }
      };
    }
  }

根据我要验证表单的切换值。当toggle值为true时，表单应该验证formControl addressFormCtrl，当toggle为false时，它应该验证fnameFormCtrl和lnameFormCtrl 我的代码运行不正常。我错过了什么？

【问题讨论】：

标签： javascript angular typescript angular4-forms form-control

【解决方案1】：

我用这样的方法打开/关闭我的验证：

setNotification(notifyVia: string): void {
    const phoneControl = this.customerForm.get('phone');
    if (notifyVia === 'text') {
        phoneControl.setValidators(Validators.required);
    } else {
        phoneControl.clearValidators();
    }
    phoneControl.updateValueAndValidity();
}

此代码使用setValidators 设置控件的验证器，并使用clearValidators 清除控件的验证器。

在您的情况下，您需要为多个控件关闭和打开它。

还要注意updateValueAndValidity。这是确保验证器实际更改所必需的。

这段代码是从ngOnInit 方法调用的，代码如下：

    this.customerForm.get('notification').valueChanges
                     .subscribe(value => this.setNotification(value));

如果用户更改notification单选按钮，subscribe方法中的代码将被执行并调用setNotification。

【讨论】：

【解决方案2】：

将toogle 转换为一个可观察的Subject，现在您订阅了新的主题。在订阅中，您可以使用名为 setValidators 的方法来替换您想要的表单控件验证器。

https://angular.io/api/forms/AbstractControl#setValidators

例如，togle.suscription(value => this.updateValidators(value));

【讨论】：

【解决方案3】：

你需要一个函数：

this.form['controls']['view'].setValidators([Validators.required]);
this.form['controls']['view'].patchValue(yourValue);

如果根据输入从后端获取某些属性，我会使用此代码。我注意到，在设置验证器时，它需要修补值，否则由于某种原因它不会更新。

【讨论】：