Angular：实现阻止输入值写入ngModel的自定义指令需求

嘿，我刚好做过类似的需求，移除事件监听器确实不是最佳方案——Angular的表单控件有自己的内部事件绑定逻辑，很容易导致你的操作失效。我给你一个更可靠的实现思路，直接从Angular表单的核心同步流程入手：

核心思路 #

我们通过拦截NgControl的ControlValueAccessor同步逻辑，当d-avoid-change传入true时，阻止视图值同步到模型，同时把输入框重置为原始模型值，并触发提示。这种方式完全贴合Angular表单的设计，不会破坏控件的正常行为。

指令实现代码 #

import { Directive, Input, OnInit, Optional, Self } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[d-avoid-change]'
})
export class AvoidChangeDirective implements OnInit {
  // 接收外部传入的布尔值，控制是否禁止修改同步
  @Input() dAvoidChange = false;
  // 保存原始的视图到模型的同步方法
  private originalOnChange: (value: any) => void;
  // 保存当前模型的原始值，用于重置输入框
  private originalModelValue: any;

  constructor(
    // 注入当前控件的NgControl实例，支持模板驱动和响应式表单
    @Optional() @Self() private ngControl: NgControl
  ) {}

  ngOnInit() {
    // 如果当前元素不是表单控件，直接返回
    if (!this.ngControl || !this.ngControl.valueAccessor) return;

    // 保存原始的registerOnChange回调
    this.originalOnChange = this.ngControl.valueAccessor.registerOnChange(() => {});
    
    // 替换自定义的registerOnChange逻辑
    this.ngControl.valueAccessor.registerOnChange((value: any) => {
      if (this.dAvoidChange) {
        // 禁止同步时，把输入框重置为原始模型值
        this.ngControl.valueAccessor.writeValue(this.originalModelValue);
        // 触发提示逻辑，这里可以换成你需要的提示方式
        this.showModifyWarning();
      } else {
        // 允许同步时，调用原始方法更新模型
        this.originalOnChange(value);
      }
    });

    // 监听模型值的变化，实时更新原始值的缓存
    this.ngControl.valueChanges?.subscribe(value => {
      this.originalModelValue = value;
    });
  }

  private showModifyWarning() {
    // 这里可以替换成更友好的提示，比如Angular Material的Snackbar、组件内的提示文本等
    alert('当前内容不可修改，请确认操作！');
  }
}

模板使用示例 #

<!-- 模板驱动表单 -->
<input 
  type="text" 
  [(ngModel)]="model.surname" 
  [d-avoid-change]="shouldPreventChange"
>

<!-- 响应式表单 -->
<input 
  type="text" 
  formControlName="surname" 
  [d-avoid-change]="shouldPreventChange"
>

在你的组件中定义控制变量：

export class YourComponent {
  model = { surname: 'Foo' };
  // 从服务器获取或根据业务逻辑设置这个变量
  shouldPreventChange = true;
}

为什么不推荐移除事件监听器？ #

Angular的表单控件（比如input）是通过ControlValueAccessor来封装视图和模型的同步逻辑的，内部会绑定自己的事件处理函数。如果你手动移除input或click事件，Angular可能在变更检测时重新绑定这些事件，导致你的拦截失效，而且还可能破坏控件的其他正常行为（比如表单验证状态同步）。

而上面的实现方式是从Angular表单的核心流程入手，完全符合框架的设计规范，稳定性和兼容性更好。

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