能否在父表单中指定验证器覆盖自定义CVA子控件的验证规则？

完全可以实现，核心思路是让自定义的EditAddressFormComponent暴露接收外部验证器配置的能力，从而覆盖或合并内部子控件的默认验证规则。以下是具体实现步骤：

1. 修改子组件（EditAddressFormComponent） #

在子组件中添加输入属性，用于接收父组件传入的针对内部子控件的验证器配置，同时在初始化内部表单时，合并默认验证器与外部传入的规则：

import { Component, Input, OnInit } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup, ValidatorFn, Validators } from '@angular/forms';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'edit-address-form',
  templateUrl: './edit-address-form.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: EditAddressFormComponent,
      multi: true
    }
  ]
})
export class EditAddressFormComponent implements ControlValueAccessor, OnInit {
  addressForm!: UntypedFormGroup;
  // 接收父组件传入的子控件验证器配置
  @Input() controlValidators: { [key: string]: ValidatorFn | ValidatorFn[] } = {};

  private onChange: (value: any) => void = () => {};
  private onTouched: () => void = () => {};

  constructor(private fb: UntypedFormBuilder) {}

  ngOnInit(): void {
    this.initAddressForm();
  }

  private initAddressForm(): void {
    // 为每个子控件合并默认验证器与外部传入的规则
    this.addressForm = this.fb.group({
      street1: ['', {
        validators: this.controlValidators['street1'] || [Validators.required] // 示例默认验证
      }],
      street2: [''],
      city: ['', this.controlValidators['city'] || [Validators.required]],
      stateOrProvince: [''],
      country: [undefined],
      postalCode: ['', this.controlValidators['postalCode'] || []]
    });

    // 监听表单值变化，同步到父组件
    this.addressForm.valueChanges.subscribe(value => {
      this.onChange(value);
    });
  }

  // 实现ControlValueAccessor的方法
  writeValue(value: any): void {
    if (value) {
      this.addressForm.patchValue(value);
    }
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    isDisabled ? this.addressForm.disable() : this.addressForm.enable();
  }
}

2. 在父组件（CompanyComponent）中传入验证规则 #

在父组件的TS代码中定义要传给子组件的验证规则，再在模板中绑定到自定义控件：

// CompanyComponent的TS代码
import { Component, OnInit } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-company',
  templateUrl: './company.component.html'
})
export class CompanyComponent implements OnInit {
  companyForm!: UntypedFormGroup;

  constructor(private fb: UntypedFormBuilder) {}

  ngOnInit(): void {
    this.companyForm = this.fb.group({
      id: [],
      name: ['', Validators.required],
      description: ['', Validators.required],
      companyAddress: [
        {
          street1: '',
          street2: '',
          city: '',
          stateOrProvince: '',
          country: undefined,
          postalCode: ''
        },
        Validators.required // 父组件针对整个地址控件的验证
      ]
    });
  }

  // 定义要传给子组件的验证规则
  get addressControlValidators() {
    return {
      street1: Validators.maxLength(50) // 覆盖street1的默认验证规则
    };
  }
}

对应的模板代码：

<form [formGroup]="companyForm">
  <!-- 其他表单控件 -->
  <edit-address-form 
    formControlName="companyAddress"
    [controlValidators]="addressControlValidators"
  ></edit-address-form>
</form>

补充说明 #

• 如果需要合并而不是完全覆盖默认验证规则，可以将子组件中validators的赋值改为数组合并，比如：

  validators: [...(this.controlValidators['street1'] as ValidatorFn[] || []), Validators.required]
  

• 父组件中针对companyAddress的Validators.required是对整个地址对象的验证，和子组件内部的子控件验证互不冲突，会共同生效。

内容的提问来源于stack exchange，提问作者blueberry buckwheat