Anuglar 格式视图输入模型而不更改模型值

Question

有没有一种干净的方法可以在不更改模型值的情况下更改输入的视图模型？

例：

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

每 4 个字符后，我想添加一个 sperator。

文本字段中的查看值：1234 5678 9012 3456

模型值应为：1234567890123456

我知道我可以在提交时使用正则表达式来替换分隔符，但我更喜欢输入上的指令或管道或其他内容。

Answer 1

由于角度限制，您无法将管道直接应用于[(ngModel)]声明 https://angular.io/guide/template-syntax#template-statements

但是您可以将其分解为属性+事件绑定：

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

因此，您可以实现applySeparatorsPipe然后将输入冲刺格式化为带有分隔符的字符串。