角度-在输入上使用指令时如何检测变化

Question

我有一个输入：

<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;
}
}

我还有一个粘贴功能，可以检查该值是否与最多11位的数字值匹配。这个功能是：

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

我需要能够检测该变量值的变化，如果它恰好是11位数字，请调用API，查找药物名称。任何小于11位的数字，并且药品名称应为空。我添加了一个(change)事件函数，但显然没有调用它，因为它被指令截获了。这是(目前(的功能：

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

给定只确保数字输入的指令，我如何检测this.model.NDC[index]变量的更改？我想在每次更改字符串长度时检查它，并在它为11个字符时调用API。

或者-是否有一种方法可以保持输入仅为数字，并允许粘贴(大多数情况下会使用粘贴，因为表单中会有11位数字(，但不允许使用字母，这并不妨碍我使用(change)事件？我知道我可能想得太多了。我选择指令路由的原因是，我还需要另一个字段限制在小数点后2位，而该指令运行良好，所以我制作了另一个匹配的字段，并更改了Regex字符串。

谢谢。

Answer 1

在这里没有任何建议的情况下，我最终使用了keyup事件。这适用于除右键单击粘贴之外的所有实例。由于该应用程序是在内部使用的，我们可以培训那些可能使用鼠标复制/粘贴键盘快捷键的人。不是一个完美的解决方案，但它是有效的。