用户在 Angular 6 中键入时更改输入字段文本答案

【问题标题】：Change input fields text as a user types in Angular 6用户在 Angular 6 中键入时更改输入字段文本
【发布时间】：2019-02-16 18:37:05
【问题描述】：

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

这里是代码

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

如何自定义它以使输入中的文本在用户键入时发生变化？

【问题讨论】：

您是否尝试像更改formatedMac 那样更改model.mac_address？如果您想做一些干净的事情，这并不容易，因为您必须处理用户使用输入提供的所有编辑工具（退格、文本选择和删除等）并将光标保持在适当位置的情况
我尝试添加 [value]='formattedMac' 但它中断了，因为在输入中没有输入任何内容时，它的未定义
你为什么使用[value]？你已经有[(ngModel)]，它是双向数据绑定
我需要将 formattedMac 值附加到用户正在输入的输入中，不知道该怎么做
您使用了[(ngModel)]，所以您输入的所有内容都会输入model.mac_address，并且您对model.mac_address 所做的每个编程修改都会输入您的输入。我会尽力回答

标签： javascript angular typescript angular-material

【解决方案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;
}

【讨论】：