在Angular中的INPUT元素中使用ngModel中的管道

Question

我有一个HTML INPUT字段.

<input 
    [(ngModel)]="item.value" 
    name="inputField" 
    type="text" 
/>

我想格式化它的值并使用现有的管道:

.... 
[(ngModel)]="item.value | useMyPipeToFormatThatValue" 
....

并收到错误消息:

动作表达式中不能有管道

在这种情况下如何使用管道？

Answer 1

您不能在模板语句中使用模板表达式运算符(管道,保存导航器):

(ngModelChange)="Template statements"

(ngModelChange)="item.value | useMyPipeToFormatThatValue = $ event"

https://angular.io/guide/template-syntax#template-statements

与模板表达式一样,模板语句使用看起来像JavaScript的语言.模板语句解析器与模板表达式解析器不同,并且特别支持基本赋值(=)和链接表达式(带;或,).

但是,不允许使用某些JavaScript语法:

• 新
• 递增和递减运算符,++和 -
• 运算符赋值,例如+ =和 - =
• 按位运算符| 和&
• 模板表达式运算符

所以你应该写如下:

<input [ngModel]="item.value | useMyPipeToFormatThatValue" 
      (ngModelChange)="item.value=$event" name="inputField" type="text" />

Plunker示例

Answer 2

<input [ngModel]="item.value | useMyPipeToFormatThatValue" 
      (ngModelChange)="item.value=$event" name="inputField" type="text" />

这里的解决方案是将绑定拆分为单向绑定和事件绑定 - 语法[(ngModel)]实际包含在内.[]是单向绑定语法,()是事件绑定语法.当一起使用时 - [()]Angular将其识别为速记,并以单向绑定和绑定到组件对象值的事件的形式连接双向绑定.

您不能使用[()]管道的原因是管道仅适用于单向绑定.因此,必须将管道拆分为仅对单向绑定进行操作并单独处理事件.

有关详细信息,请参阅角度模板语法.

Answer 3

<input [ngModel]="item.value | currency" (ngModelChange)="item.value=$event"
name="name" type="text" />

我想在接受的答案上再加一点。

如果输入控件的类型不是文本，则管道将无法工作。

请记住它并节省您的时间。

Answer 4

我尝试了上面的解决方案但是模型的值是格式化的值然后返回并给我currencyPipe错误.所以我必须这样做

  [ngModel]="transfer.amount | currency:'USD':true"
                                   (blur)="addToAmount($event.target.value)"
                                   (keypress)="validateOnlyNumbers($event)"

并且在addToAmount的功能上 - >改变模糊导致ngModelChange给我游标问题.

removeCurrencyPipeFormat(formatedNumber){
    return formatedNumber.replace(/[$,]/g,"")
  }

并删除其他非数字值.

validateOnlyNumbers(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }