Angular中使用输入限制指令时如何检测值变更？

我有一个输入框，绑定了appElevenDigitInteger自定义指令以限制仅输入数字（输入值为字符串类型，未使用数字输入框），同时配置了粘贴处理函数handlePasteNDC来校验粘贴内容为最多11位数字。我需要检测this.model.NDC[index]变量的变更：当值长度恰好为11位时调用API查询药品名称，长度不足11位时将药品名称置空。但添加的(change)事件函数ndcChanged因被指令拦截无法触发。

当前代码 #

输入框代码 #

<div class="col-md-2">
  <input appElevenDigitInteger
         name="NDC{{index}}"
         class="form-control"
         (paste)="handlePasteNDC($event.clipboardData.getData('text/plain'))"
         (change)="ndcChanged($event, index)"
         [(ngModel)]="model.NDC[index]"
         #ndc="ngModel"
         required
         maxlength="11"
         minlength="11">
  <div class="text-danger"
       *ngIf="ndc.invalid && (ndc.dirty || ndc.touched)">
    <p *ngIf="ndc.errors.required">NDC is required.</p>
    <p *ngIf="ndc.errors.minlength || ndc.errors.maxlength">NDC must be 11 digits.</p>
  </div>
</div>

自定义指令代码 #

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appElevenDigitInteger]'
})
export class ElevenDigitIntegerDirective {
  private regex: RegExp = new RegExp(/^\d{0,11}$/g);
  private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', 'ArrowLeft', 'ArrowRight', 'Del', 'Delete'];

  constructor(private el: ElementRef) {
  }

  @HostListener('keydown', ['$event']) onKeyDown(e: KeyboardEvent) {
    if (this.specialKeys.indexOf(e.key) !== -1
      || (e.key === 'v' && e.ctrlKey === true)
      || (e.key === 'v' && e.metaKey === true)) {
      return;
    }
    let current: string = this.el.nativeElement.value;
    const startPosition = this.el.nativeElement.selectionStart;
    const endPosition = this.el.nativeElement.selectionEnd;
    const next: string = [current.slice(0, startPosition), e.key == 'Decimal' ? '.' : e.key, current.slice(endPosition)].join('');
    if (next && !String(next).match(this.regex)) {
      e.preventDefault();
    }
  }

  @HostListener('paste', ['$event']) onPaste(e: ClipboardEvent) {
    return;
  }
}

粘贴处理函数 #

handlePasteNDC(e) {
  var regex = new RegExp(/^\d{0,11}$/g);
  if (regex.test(e)) {
    return true;
  }
  return false;
}

变更检测函数 #

ndcChanged(event: any, index: number){
  console.log(index);
}

疑问 #

1. 在现有指令限制输入的前提下，如何检测this.model.NDC[index]的变更？
2. 有没有既能限制输入为数字、允许粘贴，又不影响(change)事件触发的实现方案？

问题1：检测model.NDC[index]的变更 #

方案1：使用ngModelChange事件 #

直接替换(change)为(ngModelChange)，这是Angular双向绑定原生的变更触发事件，不受指令键盘拦截逻辑影响，只要ngModel绑定的值发生变化就会触发：

<input appElevenDigitInteger
       ...
       (ngModelChange)="ndcChanged($event, index)"
       [(ngModel)]="model.NDC[index]"
       ...>

对应调整函数参数，直接接收变更后的值：

ndcChanged(newValue: string, index: number){
  if (newValue.length === 11) {
    // 调用API查询药品名称
  } else {
    // 将对应药品名称置空
  }
}

方案2：使用ngOnChanges生命周期钩子 #

如果需要监听整个model.NDC数组的变更，可在组件中实现OnChanges接口：

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

@Component({...})
export class YourComponent implements OnChanges {
  ngOnChanges(changes: SimpleChanges) {
    if (changes['model'] && changes['model'].currentValue) {
      this.model.NDC.forEach((ndcValue, index) => {
        if (ndcValue.length === 11) {
          // 调用API
        } else {
          // 置空药品名称
        }
      });
    }
  }
}

注意：此方式适合监听整个对象/数组的批量变更，单个元素频繁变更时，ngModelChange效率更高。

问题2：不影响change事件的输入限制方案 #

当前指令的问题在于：粘贴事件处理逻辑未正确校验内容，且可能干扰事件传递；键盘拦截仅阻止非法输入，但未确保合法操作时事件正常触发。以下是优化方案：

优化自定义指令 #

调整指令逻辑，仅在输入/粘贴非法内容时阻止事件，合法操作时让事件正常传递：

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appElevenDigitInteger]'
})
export class ElevenDigitIntegerDirective {
  private regex: RegExp = /^\d{0,11}$/;
  private specialKeys: string[] = ['Backspace', 'Tab', 'End', 'Home', 'ArrowLeft', 'ArrowRight', 'Del', 'Delete'];

  constructor(private el: ElementRef) {}

  @HostListener('keydown', ['$event']) onKeyDown(e: KeyboardEvent) {
    // 允许特殊按键和粘贴快捷键
    if (this.specialKeys.includes(e.key) || (e.key === 'v' && (e.ctrlKey || e.metaKey))) {
      return;
    }

    const current = this.el.nativeElement.value;
    const start = this.el.nativeElement.selectionStart;
    const end = this.el.nativeElement.selectionEnd;
    const next = current.slice(0, start) + e.key + current.slice(end);

    // 仅非法输入时阻止事件
    if (!this.regex.test(next)) {
      e.preventDefault();
    }
  }

  @HostListener('paste', ['$event']) onPaste(e: ClipboardEvent) {
    const clipboardData = e.clipboardData?.getData('text/plain') || '';
    // 校验粘贴内容，非法则阻止
    if (!this.regex.test(clipboardData)) {
      e.preventDefault();
      return;
    }
    // 合法内容允许粘贴，事件正常传递
  }
}

移除冗余的粘贴处理函数 #

优化后的指令已整合粘贴校验逻辑，可直接删除输入框上的(paste)绑定：

<input appElevenDigitInteger
       name="NDC{{index}}"
       class="form-control"
       (change)="ndcChanged($event, index)"
       [(ngModel)]="model.NDC[index]"
       #ndc="ngModel"
       required
       maxlength="11"
       minlength="11">

优化说明 #

• 指令仅拦截非法输入/粘贴，合法操作时不阻止事件传递，确保change事件正常触发；
• 粘贴校验逻辑统一到指令中，避免组件与指令的重复处理；
• 保留原有的输入限制功能，同时保证变更事件的正常触发。

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