Angular响应式表单：如何指定自定义验证器的触发时机？

假设有一个包含两个字段的表单：

this.form = formBuilder.group({
  emailRequired: [false],
  emailRecipients: ['']
});

需求很明确：只有当emailRequired字段设为true时，emailRecipients字段才需要应用必填验证。

之前尝试了自定义控件验证器的实现：

const emailRecipientsControl = fb.control('', {
    validators: [
        (x) =>
        {
            // 当emailRequired为true时，邮箱控件必填
            if (x.parent?.get('emailRequired').value)
            {
                return { required: true }
            };
            return null;
        }
    ]
});
this.form = this.fb.group({
    emailRequired: [false],
    emailRecipients: emailRecipientsControl
});

但这个方案有个明显问题：自定义验证器只会在emailRecipients自身值变化时触发，emailRequired切换状态时不会自动触发验证，不符合需求。

以下是几种适合大型表单场景的解决办法，无需订阅整个表单：

方法1：监听目标控件变化，动态更新验证器 #

直接监听emailRequired的状态变化，根据值动态给emailRecipients添加/移除必填验证器：

this.form = this.fb.group({
  emailRequired: [false],
  emailRecipients: ['']
});

// 获取两个控件的引用
const emailRequiredCtrl = this.form.get('emailRequired');
const emailRecipientsCtrl = this.form.get('emailRecipients');

// 监听emailRequired的状态变化
emailRequiredCtrl.valueChanges.subscribe(isRequired => {
  if (isRequired) {
    emailRecipientsCtrl.setValidators(Validators.required);
  } else {
    emailRecipientsCtrl.clearValidators();
  }
  // 手动触发验证更新，emitEvent设为false避免循环触发
  emailRecipientsCtrl.updateValueAndValidity({ emitEvent: false });
});

方法2：把验证逻辑放在表单组级别 #

将条件验证逻辑挂载到表单组上，这样组内任意控件值变化时都会触发验证：

this.form = this.fb.group({
  emailRequired: [false],
  emailRecipients: ['']
}, {
  validators: (formGroup: FormGroup) => {
    const isRequired = formGroup.get('emailRequired').value;
    const recipientsValue = formGroup.get('emailRecipients').value;
    
    if (isRequired && !recipientsValue) {
      formGroup.get('emailRecipients').setErrors({ required: true });
    } else {
      // 清除不必要的必填错误
      const recipientsErrors = formGroup.get('emailRecipients').errors;
      if (recipientsErrors?.required) {
        delete recipientsErrors.required;
        formGroup.get('emailRecipients').setErrors(recipientsErrors || null);
      }
    }
    return null;
  }
});

方法3：保留控件级验证器，手动触发验证 #

如果想保留原有的控件级验证器结构，可以在emailRequired变化时手动触发emailRecipients的验证：

const emailRecipientsControl = this.fb.control('', {
  validators: [
    (control: AbstractControl) => {
      const isRequired = control.parent?.get('emailRequired').value;
      if (isRequired && !control.value) {
        return { required: true };
      }
      return null;
    }
  ]
});

this.form = this.fb.group({
  emailRequired: [false],
  emailRecipients: emailRecipientsControl
});

// 监听emailRequired变化，手动触发目标控件验证
this.form.get('emailRequired').valueChanges.subscribe(() => {
  emailRecipientsControl.updateValueAndValidity({ emitEvent: false });
});

内容的提问来源于stack exchange，提问作者Wouter Vandenputte