javascript - 当用户在 Angular 6 中键入时更改输入字段文本

Question

我有一个函数可以在用户输入时添加和删除冒号，但是输出显示在输入字段之外，因此我试图在输入时更改输入字段。我有以下在(更改)上执行的函数。

这是代码

<mat-form-field>
  <input matInput (change)="changedInput()" placeholder="MAC address" name="mac_address" required [(ngModel)]="model.mac_address" (blur)="validate()">
  <mat-error *ngFor="let error of errors_by_field['mac_address']">{{error.message}}</mat-error>
  <span>{{formatedMac}}</span>
</mat-form-field>

changedInput() {
  const blocks = this.model.mac_address.match(/.{1,2}/g);
  this.formatedMac = blocks.shift();
  for (const block of blocks) {
    this.formatedMac = this.formatedMac + ':' + block;
  }
}

如何自定义它以使输入中的文本随着用户键入而更改？

Answer 1

您使用了 [(ngModel)]，因此您输入的所有内容都会进入 model.mac_address 以及您对 model.mac_address 所做的每个编程修改> 进入您的输入。

然后试试这个:

<mat-form-field>
  <input matInput (change)="changedInput()" placeholder="MAC address" name="mac_address" required [(ngModel)]="model.mac_address" (blur)="validate()">
  <mat-error *ngFor="let error of errors_by_field['mac_address']">{{error.message}}</mat-error>
  <span>{{model.mac_address}}</span>
</mat-form-field>

changedInput() {
  const blocks = this.model.mac_address.match(/.{1,2}/g);
  let formattedMac = blocks.shift();
  for (const block of blocks) {
    formattedMac  = formattedMac  + ':' + block;
  }
  this.model.mac_address = formattedMac;
}