获取 typescript 中的输入值

Question

我有 2 个输入值，我需要对第一个input值进行验证，即信用卡号输入，获取 ts 文件的input值并检查 API 上的验证，同时用户仍在输入第二个input ，例如我的第一个输入值： 4444 4444 4444 4444 ，所以我需要在进行验证之前使用subString()来获取前 6 个数字，这是我尝试过的；

html文件

  <div>
    <input
      (keypress)="numberOnly($event)"
      class="input"
      type="text"
      (keyup)="onKey($event)"
      [(ngModel)]="creditCardNo"
    />
  </div>
  <div>
    <input
      class="input"
      type="text"
      [(ngModel)]="cardHolderName"
    />
  </div>

ts文件

  onKey(event) {
    this.creditCardNo = event.target.value;
    const test = this.creditCardNo
      .replace(/\s/g, '')
      .toString()
      .substr(0, 6);
      this.paymentService.getCreditCardDetail('JPJSMN', test).subscribe(res => {
        if (!res) {
          return;
        }
        console.log(res);
      });
  }

使用(keyup)="onKey($event)"获取值更改，并根据我得到的响应对 ts 文件进行验证，但是我注意到如果我使用(keyup)="onKey($event)" ，它不会检测到复制和粘贴，它一直在请求 API，如果有更好的做法来解决这个问题？

Answer 1

您可以选择创建自定义的“digitOnly”Angular 指令。

可以在此处找到有关如何执行此操作的出色指南： https://codeburst.io/digit-only-directive-in-angular-3db8a94d80c3

教程中显示的指令解决了复制和粘贴等问题。

Answer 2

如果您只想在用户以与编辑值相同的方式粘贴内容时更新 model，则可以使用

(ngModelChange)="pasteEvent($event)"

<div>
    <input
      (keypress)="numberOnly($event)"
      class="input"
      type="text"
      (ngModelChange)="pasteEventcreditCardNo(creditCardNo)"
      [(ngModel)]="creditCardNo"
    />
  </div>
  <div>
    <input
      class="input"
      type="text"
      (ngModelChange)="pasteEventcardHolderName(cardHolderName)"
      [(ngModel)]="cardHolderName"
    />
  </div>