Question

我正在开发用户表格。

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

下面的用户表单组代码：

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

请对此提供帮助。

Answer 1

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

示例：

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。

Answer 2

您也可以简单地使用三元运算符，例如：

 medicalPolicyInfo: this.myFormBuilder.group({
    policyNumber: ['', isMedicalPolicy ? [ Validator.maxLength(10), Validators.required]:[]]
     
  });

嵌套FormGroup FormControl上的角反应形式条件验证？

2 个答案: