无需fork库，如何重写Angular中ControlErrorDirective的行为？

完全可以不用fork整个库，借助Angular的依赖注入令牌覆盖机制，就能替换原库的ControlErrorDirective，而且后续取消重写的成本极低。具体实现步骤如下：

1. 创建自定义ControlErrorDirective #

继承原库的指令（或自行实现核心逻辑），修改错误显示的触发条件——仅当控件被触摸且验证失败时展示错误信息：

import { Directive, Input, OnInit, ElementRef } from '@angular/core';
import { ControlErrorDirective as OriginalErrorDirective } from '@ngneat/error-tailor';
import { FormControl } from '@angular/forms';
import { takeUntil } from 'rxjs/operators';

@Directive({
  selector: '[controlError]',
  providers: [
    { provide: OriginalErrorDirective, useExisting: CustomControlErrorDirective }
  ]
})
export class CustomControlErrorDirective extends OriginalErrorDirective implements OnInit {
  @Input() control!: FormControl;

  constructor(el: ElementRef) {
    super(el);
  }

  ngOnInit(): void {
    super.ngOnInit();
    
    // 替换原有的状态监听逻辑
    this.control.statusChanges
      .pipe(takeUntil(this.destroy$))
      .subscribe(() => {
        const shouldDisplay = this.control.touched && this.control.invalid;
        this.toggleErrorVisibility(shouldDisplay);
      });
  }

  private toggleErrorVisibility(show: boolean): void {
    // 复用原库的错误元素引用，控制显示/隐藏
    if (this.errorViewContainer) {
      if (show && !this.errorComponentRef) {
        this.createErrorComponent();
      } else if (!show && this.errorComponentRef) {
        this.destroyErrorComponent();
      }
    }
  }
}

注：如果原库的部分属性/方法是私有无法访问的，直接复制原库ControlErrorDirective的源码到自定义指令中，再修改错误判断逻辑即可。

2. 在模块中覆盖原指令 #

在你的应用根模块或功能模块中，声明自定义指令，并通过DI替换原库的指令：

import { NgModule } from '@angular/core';
import { ControlErrorDirective } from '@ngneat/error-tailor';
import { CustomControlErrorDirective } from './custom-control-error.directive';

@NgModule({
  declarations: [CustomControlErrorDirective],
  providers: [
    { provide: ControlErrorDirective, useClass: CustomControlErrorDirective }
  ]
})
export class AppModule {}

3. 后续取消重写的操作 #

如果后续原库合并了相关PR，只需两步即可恢复默认行为：

• 移除模块中providers数组里的指令替换配置
• 删除自定义的CustomControlErrorDirective文件

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