Javascript 角度：有条件地更改FormControl

我正在基于切换值创建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

---

我的代码运行不正常。我错过了什么

将toogle转换为一个可观察的主体，现在您可以使用新主体。在suscription中，您可以使用名为setValidators的方法来替换表单控件验证器

---

例如，toogle.suscription（value=>this.updateValidators（value））

将toogle转换为一个可观察的主体，现在您可以使用新主体。在suscription中，您可以使用名为setValidators的方法来替换表单控件验证器

---

例如，toogle.suscription（value=>this.updateValidators（value））

我使用以下方法打开/关闭验证：

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

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

此代码使用

setValidators

设置控件的验证器，并使用

clearvidators

清除控件的验证器

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

还要注意

updateValue和validity

。这是确保验证器实际更改所必需的

从

ngOnInit

方法调用此代码，代码如下：

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

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

---

如果用户更改了

通知

单选按钮，则执行

订阅

方法中的代码，并调用

设置通知

我使用以下方法打开/关闭验证：

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

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

此代码使用

setValidators

设置控件的验证器，并使用

clearvidators

清除控件的验证器

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

还要注意

updateValue和validity

。这是确保验证器实际更改所必需的

从

ngOnInit

方法调用此代码，代码如下：

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

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

---

如果用户更改了

通知

单选按钮，则执行

订阅

方法中的代码，并调用

设置通知

，您需要一个具有以下功能的函数：

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

如果根据输入从备份中获取cetain属性，我将使用此代码。

---

我注意到，当设置验证器时，它需要将值修补为，否则由于某种原因它不会更新。

您需要一个具有以下功能的函数：

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

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