如何扩展ControlValueAccessor添加isEmpty方法以实现父表单验证子表单空值？

这确实是个很典型的场景——当你封装了一堆自定义表单控件（都实现了ControlValueAccessor），但想在父表单里统一校验它们是否为空，却因为每个控件的空值判断逻辑不一样，直接扩展接口又拿不到方法，确实头疼。下面给你几个实用的实现思路，你可以根据自己的场景选：

方案一：直接获取自定义控件实例，调用其isEmpty方法 #

因为父表单里的FormControl只是Angular的表单控件包装类，不会自动暴露你自定义组件的方法，但你可以通过ViewChild/ViewChildren直接拿到自定义组件的实例，这样就能调用它们各自实现的isEmpty了。

实现步骤： #

1. 在父组件模板中正常使用自定义控件：

<form [formGroup]="parentForm">
  <app-custom-input formControlName="userInput"></app-custom-input>
  <app-custom-multi-select formControlName="categorySelect"></app-custom-multi-select>
</form>
<button (click)="checkAllControlsEmpty()">检查是否全为空</button>

2. 父组件中通过ViewChildren获取所有自定义控件实例：

import { Component, ViewChildren, QueryList } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { CustomInputComponent } from './custom-input.component';
import { CustomMultiSelectComponent } from './custom-multi-select.component';

@Component({
  selector: 'app-parent-form',
  templateUrl: './parent-form.component.html'
})
export class ParentFormComponent {
  parentForm: FormGroup;

  // 用ViewChildren获取所有需要校验的自定义控件实例
  @ViewChildren(CustomInputComponent, CustomMultiSelectComponent) 
  customControls!: QueryList<CustomInputComponent | CustomMultiSelectComponent>;

  constructor(private fb: FormBuilder) {
    this.parentForm = this.fb.group({
      userInput: [''],
      categorySelect: [[]]
    });
  }

  checkAllControlsEmpty() {
    // 遍历所有自定义控件，调用它们各自的isEmpty方法
    const allEmpty = this.customControls.every(control => control.isEmpty());
    console.log('所有子控件是否为空：', allEmpty);
    // 这里可以添加后续逻辑，比如设置表单验证状态、提示用户等
  }
}

3. 每个自定义组件实现自己的isEmpty方法：
   比如CustomInputComponent：

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-custom-input',
  template: `<input [(ngModel)]="innerValue" (input)="onInputChange()">`,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomInputComponent),
      multi: true
    }
  ]
})
export class CustomInputComponent implements ControlValueAccessor {
  innerValue = '';
  private onChange!: (value: string) => void;
  private onTouched!: () => void;

  // 实现自己的空值判断逻辑
  isEmpty(): boolean {
    return !this.innerValue || this.innerValue.trim().length === 0;
  }

  // 以下是ControlValueAccessor的标准实现
  writeValue(value: string): void {
    this.innerValue = value;
  }

  registerOnChange(fn: (value: string) => void): void {
    this.onChange = fn;
  }

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

  onInputChange() {
    this.onChange(this.innerValue);
    this.onTouched();
  }
}

CustomMultiSelectComponent的isEmpty可以是：

isEmpty(): boolean {
  return !this.innerValue || this.innerValue.length === 0;
}

方案二：将空值状态同步到FormControl的自定义属性 #

如果你不想直接操作组件实例，可以在自定义控件内部，把isEmpty的结果同步到对应的FormControl上，这样父组件通过FormControl就能拿到这个状态。

实现步骤： #

1. 在自定义组件中注入FormControl，并在值变化时更新其自定义属性：

import { Component, forwardRef, Injector } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';

@Component({
  selector: 'app-custom-input',
  template: `<input [(ngModel)]="innerValue" (input)="onInputChange()">`,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomInputComponent),
      multi: true
    }
  ]
})
export class CustomInputComponent implements ControlValueAccessor {
  innerValue = '';
  private onChange!: (value: string) => void;
  private onTouched!: () => void;

  constructor(private injector: Injector) {}

  isEmpty(): boolean {
    return !this.innerValue || this.innerValue.trim().length === 0;
  }

  registerOnChange(fn: (value: string) => void): void {
    this.onChange = (value) => {
      fn(value);
      // 获取当前控件对应的FormControl，同步isEmpty状态
      const formControl = this.injector.get(FormControl);
      (formControl as any).isEmpty = this.isEmpty();
    };
  }

  // 其他ControlValueAccessor方法...
}

2. 父组件中直接遍历FormControl获取状态：

checkAllControlsEmpty() {
  const allControls = Object.values(this.parentForm.controls);
  const allEmpty = allControls.every(control => (control as any).isEmpty);
  console.log('所有子控件是否为空：', allEmpty);
}

方案三：用自定义验证器封装空值逻辑（推荐） #

既然是要做验证，最贴合Angular表单设计模式的方式是把空值判断逻辑封装成自定义验证器，注册到每个自定义控件对应的FormControl上，这样父组件可以通过表单的验证状态直接判断是否为空。

实现步骤： #

1. 在自定义组件中定义静态的空值验证器：

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormControl, ValidationErrors } from '@angular/forms';

@Component({
  selector: 'app-custom-input',
  template: `<input [(ngModel)]="innerValue" (input)="onInputChange()">`,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomInputComponent),
      multi: true
    }
  ]
})
export class CustomInputComponent implements ControlValueAccessor {
  innerValue = '';
  private onChange!: (value: string) => void;
  private onTouched!: () => void;

  // 静态验证器方法，封装空值判断逻辑
  static emptyValidator(control: FormControl): ValidationErrors | null {
    const isEmpty = !control.value || control.value.trim().length === 0;
    return isEmpty ? { customEmpty: '该输入框不能为空' } : null;
  }

  // 其他ControlValueAccessor方法...
}

2. 父组件创建FormControl时添加该验证器：

import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { CustomInputComponent } from './custom-input.component';
import { CustomMultiSelectComponent } from './custom-multi-select.component';

@Component({
  selector: 'app-parent-form',
  templateUrl: './parent-form.component.html'
})
export class ParentFormComponent {
  parentForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.parentForm = this.fb.group({
      userInput: ['', [CustomInputComponent.emptyValidator]],
      categorySelect: [[], [CustomMultiSelectComponent.emptyValidator]]
    });
  }

  checkAllControlsEmpty() {
    // 通过验证器的错误状态判断是否为空
    const allEmpty = Object.values(this.parentForm.controls).every(control => 
      control.hasError('customEmpty')
    );
    console.log('所有子控件是否为空：', allEmpty);
  }
}

这种方式不仅能满足你的空值校验需求，还能自动参与Angular表单的整体验证流程，比如表单提交时的校验、控件的错误提示等，非常推荐。

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