Angular : 有条件地改变 FormControl

Question

我正在创建一个基于切换值的表单组验证

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
        }
      };
    }
  }

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

Answer 1

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

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

示例，toogle.suscription（值 => this.updateValidators（值））；

Answer 2

我用这样的方法on/off验证：

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.

Answer 3

您需要一个函数：

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

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

Angular : 有条件地改变 FormControl

Angular : Conditionally changing FormControl

javascript

angular

typescript

angular4-forms

form-control