Изменить поля ввода текста как пользователь вводит в 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;
}