时间戳

首页 > 解决方案 > 嵌套FormGroup FormControl上的角度反应表单条件验证？

angular - 嵌套FormGroup FormControl上的角度反应表单条件验证？

问题描述

我正在开发一个用户表单。

我正在总结我的问题，如果用户勾选了医疗政策复选框，那么用户必须填写医疗政策详细信息。

用户表单组代码如下：

let userForm = this.myFormBuilder.group({
  userName: ['',Validators.required],
  password: ['',Validators.required],
  isMedicalPolicy: [false],
  medicalPolicyInfo: this.myFormBuilder.group({
    policyNumber: ['',Validator.maxLength(10)], // how to apply conditional required validation here, 
      if is isMedicalPolicy value is true.
  });
});

请帮助解决这个问题。

标签： angular

解决方案

您可以观察单个表单控件值的更改，然后根据该值更改其他控件的验证。

例子：

const isMedicalPolicyControl = this.userForm.get('isMedicalPolicy');
const policyNumberControl = this.userForm.get('medicalPolicyInfo.policyNumber');

this.subscription = isMedicalPolicyControl.valueChanges.subscribe(value => {

  if (value) {
    policyNumberControl.setValidators([
      Validators.required,
      Validator.maxLength(10)
    ]);
  }
  else {
    policyNumberControl.setValue('');
    policyNumberControl.setValidators(null);
  }

  policyNumberControl.updateValueAndValidity();

});

当您的组件被销毁时，您需要取消订阅可观察的 valueChanges。

推荐阅读