Angular中Validator实例的registerOnValidatorChange为何覆盖现有onChange处理函数？

先来说说你提到的registerOnValidatorChange为什么会覆盖onChange，以及这个设计的初衷——我刚好对Angular早期版本的表单实现比较熟悉，结合你说的4.4.6版本的代码逻辑来解释：

为什么会覆盖onChange？ #

在Angular 4.x的RequiredValidator这类基础验证器指令里，registerOnValidatorChange的实现就是直接把传入的函数赋值给指令内部的onChange属性，没有做合并或追加操作。这不是bug，而是刻意的设计：这类验证器的职责非常单一，只需要响应自身依赖的状态变化（比如required属性的开关），然后触发表单控件的重新验证。它不需要同时维护多个变更订阅，所以直接覆盖旧的onChange，确保每次注册的都是最新的、由表单控件提供的重新验证触发函数，避免残留的旧订阅导致不必要的重复验证。

设计动机是什么？ #

Angular的表单验证分为静态验证和动态验证：

• 静态验证器（比如Validators.required）是一次性绑定的，规则不会随外部状态改变；
• 动态验证器则依赖外部状态（比如组件内的变量控制是否必填），当外部状态变化时，必须重新执行验证，否则表单的状态会和实际规则脱节。

registerOnValidatorChange就是Angular为动态验证器提供的“通信通道”：表单控件会把自己的重新验证触发函数传给验证器，当验证器依赖的状态（比如required属性）发生变化时，验证器调用这个函数，就能让控件重新跑一遍所有验证逻辑，更新表单的valid、errors等状态。

举个实际场景：你有一个输入框，通过复选框控制它是否必填。当用户勾选复选框时，RequiredValidator的required属性变为true，此时验证器需要通知表单控件“规则变了，你再验证一次”——这就是registerOnValidatorChange的核心作用。

关于你监听必填状态变化遇到的问题 #

看起来你可能误解了registerOnValidatorChange的用途：它不是用来让你监听状态变化的，而是让验证器通知控件重新验证的。所以用它来监听必填状态变化自然会出问题，因为Angular的验证器指令会覆盖你设置的自定义函数。

给你几个更靠谱的解决方案：

方案1：监听验证器指令的输入属性变化 #

通过ViewChild获取RequiredValidator实例，然后监听它的required输入属性变化。在Angular 4.x里可以用ngOnChanges实现：

import { Component, ViewChild, OnChanges, SimpleChanges } from '@angular/core';
import { RequiredValidator } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  template: `<input [required]="isRequired" formControlName="name">`
})
export class MyFormComponent implements OnChanges {
  @ViewChild(RequiredValidator) requiredValidator!: RequiredValidator;
  isRequired = false;

  ngOnChanges(changes: SimpleChanges) {
    if (changes['isRequired']) {
      console.log('必填状态变化:', this.isRequired);
    }
  }
}

方案2：直接监听控制必填状态的源变量 #

如果你的必填状态是由组件内的变量（比如isRequired）控制的，那直接监听这个变量的变化最直接，不需要绕验证器：

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  template: `
    <input [required]="isRequired" [formControl]="myControl">
    <button (click)="toggleRequired()">切换必填状态</button>
  `
})
export class MyComponent {
  isRequired = false;
  myControl = new FormControl();

  toggleRequired() {
    this.isRequired = !this.isRequired;
    // 这里直接就能拿到状态变化
    console.log('必填状态变为:', this.isRequired);
    // 若需要手动触发验证，可调用此方法
    this.myControl.updateValueAndValidity();
  }
}

方案3：监听表单控件的验证状态变化 #

如果你需要从控件层面监听是否因必填规则导致状态变化，可以订阅控件的statusChanges，然后检查控件的errors：

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  template: `<input [required]="isRequired" [formControl]="myControl">`
})
export class MyComponent implements OnInit {
  isRequired = false;
  myControl = new FormControl();

  ngOnInit() {
    this.myControl.statusChanges.subscribe(() => {
      const hasRequiredError = this.myControl.hasError('required');
      console.log('控件是否因必填报错:', hasRequiredError);
    });
  }
}

总结 #

registerOnValidatorChange的核心作用是让动态验证器主动触发表单控件的重新验证，它覆盖onChange是因为早期Angular的基础验证器职责单一，只需要维护一个触发函数。如果你要监听必填状态变化，直接从控制状态的源变量或者验证器的输入属性入手会更可靠。

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