Question

我正在基于切换值

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

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

Answer 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。

Answer 2

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

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

示例，toogle.suscription（value =＆gt; this.updateValidators（value））;

Answer 3

您需要一个功能：

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

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

Angular：有条件地改变FormControl

3 个答案: