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