输入的Anuglar格式ViewModel，无需更改模型值

Question

是否有一种干净的方法来更改输入的ViewModel而不更改modelValue？

示例：

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

每4个字符之后，我要添加一个Sperator。

文本字段中的ViewValue：1234 5678 9012 3456

ModelValue应该是：1234567890123456

我知道我可以在提交时使用 Regex 替换分隔符，但是我更喜欢在输入中使用指令或管道或其他东西。

Answer 1

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

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

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

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