Угловой материал добавляет точку с запятой после каждых 2 символов

Question

У меня есть следующий код, который является полем ввода Angular Material, который пользователь может ввести в MAC-адресе.Я хочу иметь возможность добавлять двоеточие (:) после каждых 2 символов, которые вводит пользователь. А также, если пользователь удаляет символ рядом с двоеточием, он должен удалить это конкретное двоеточие

<mat-form-field>
  <input matInput 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>
</mat-form-field>

Любойидеи как это сделать в Angular 6?

Answer 1

Я бы добавил событие в ваш ввод, а затем сделал бы то, что вам нужно, в отдельной переменной, используя model.mac_address.

<mat-form-field>
  <input matInput (keyup)="changedInput($event)" 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>
</mat-form-field>

Затем добавьте функцию

public changedInput(value){
 if(this.model.mac_address){
   //we do not need the value, we just update the formatedMac using this.model.mac_address
   const inputWithourColon = this.model.mac_address.replace(new RegExp(";", 'g'), "");
   let blocks = inputWithourColon.match(/.{1,2}/g);
   let formatedMac = blocks.shift();
   for (let block of blocks){
    formatedMac = formatedMac + ";" + block;
   }
   this.model.mac_address = formatedMac;
 }
}

РЕДАКТИРОВАТЬ

Я изменил (изменил) директиву с помощью (keyup) и обновил код для записи форматированного текста внутри поля ввода, пока пользователь пишет.