Anuglar Format ViewModel для ввода без изменения значения модели

Question

Есть ли чистый способ изменить ViewModel для входа без изменения modelValue?

Пример:

<input type="text" [(ngModel)]="myIban">

После каждых 4 символов я хочу добавить sperator.

ViewValue в текстовом поле: 1234 5678 9012 3456

Значение модели должно быть: 1234567890123456

Я знаю, что просто мог бы использовать Regex для замены разделителей при отправке, но я бы предпочел директиву, трубу или что-то еще на входе.

Answer 1

Нельзя применять трубы напрямую к декларации [(ngModel)] из-за угловых ограничений. https://angular.io/guide/template-syntax#template-statements

Но вы можете разбить его на свойство + привязка события:

<input type="text" [ngModel]="myIban | applySeparatorsPipe" 
      (ngModelChange)="myIban=$event" />

Таким образом, вы можете реализовать applySeparatorsPipe, затем с форматированием входного спринта в строку с разделителями.