Angular中ControlValueAccessor如何检测父控件验证器变化

方案1：利用NgControl.control.statusChanges监听状态变更 #

虽然Angular没有提供直接的validatorChanges流，但控件验证器变更会触发状态更新，我们可以通过状态变化间接捕获必填规则的变动：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { NgControl, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-custom-control',
  templateUrl: './custom-control.component.html',
  providers: [...] // 你的ControlValueAccessor提供者配置
})
export class CustomControlComponent implements OnInit, OnDestroy, ControlValueAccessor {
  private statusSub?: Subscription;
  isRequired = false;

  constructor(private ngControl: NgControl) {}

  ngOnInit(): void {
    this.checkIfRequired();
    this.statusSub = this.ngControl.control?.statusChanges.subscribe(() => {
      this.checkIfRequired();
    });
  }

  private checkIfRequired(): void {
    const control = this.ngControl.control;
    if (!control) return;
    
    // 检查同步验证器中是否包含required
    this.isRequired = control.hasValidator(Validators.required);
    // 若需支持异步必填验证器，补充以下逻辑
    // this.isRequired = this.isRequired || control.hasAsyncValidator(你的异步必填验证器);
  }

  ngOnDestroy(): void {
    this.statusSub?.unsubscribe();
  }

  // 实现ControlValueAccessor接口的writeValue、registerOnChange等方法
}

方案2：用KeyValueDiffer精准监听验证器引用变化 #

如果不想依赖状态变更，可通过KeyValueDiffer检测ngControl.control.validator的引用变化（父组件动态替换验证器数组时，该属性引用会改变）：

import { Component, OnInit, OnDestroy, KeyValueDiffers } from '@angular/core';
import { NgControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-custom-control',
  templateUrl: './custom-control.component.html',
  providers: [...]
})
export class CustomControlComponent implements OnInit, OnDestroy, ControlValueAccessor {
  private differ?: any;
  isRequired = false;

  constructor(
    private ngControl: NgControl,
    private differs: KeyValueDiffers
  ) {}

  ngOnInit(): void {
    this.checkIfRequired();
    if (this.ngControl.control) {
      this.differ = this.differs.find({ validator: this.ngControl.control.validator }).create();
    }
  }

  ngDoCheck(): void {
    if (!this.differ || !this.ngControl.control) return;
    
    const changes = this.differ.diff({ validator: this.ngControl.control.validator });
    if (changes) {
      this.checkIfRequired();
    }
  }

  private checkIfRequired(): void {
    this.isRequired = this.ngControl.control?.hasValidator(Validators.required) ?? false;
  }

  ngOnDestroy(): void {
    // 组件销毁时differ会自动清理，无需额外操作
  }

  // 实现ControlValueAccessor接口方法
}

关键注意点 #

• hasValidator是Angular 12+新增的方法，比手动遍历验证器数组更可靠。
• 若涉及异步必填验证，需补充hasAsyncValidator的检查逻辑。
• 使用statusChanges时务必在组件销毁时取消订阅，避免内存泄漏。

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