我有一个 HTML INPUT 字段。
<input
[(ngModel)]="item.value"
name="inputField"
type="text"
/>
我想格式化它的值并使用现有的管道：
....
[(ngModel)]="item.value | useMyPipeToFormatThatValue"
....
并得到错误信息：
动作表达式中不能有管道
如何在这种情况下使用管道？
【问题讨论】：
标签： angular pipe html-input angular2-ngmodel
你不能在模板语句中使用Template expression operators(pipe, save navigator)：
(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" />
【讨论】：
item.value 是一个数字，您使用DatePipe 将其转换为日期字符串。当日期被编辑时，$event 也将是一个日期字符串，并且不适合回到item.value 您必须反转管道在您的(ngModelChange) 表达式中所做的事情 - 即将日期字符串转回一个数字。
(ngModelChange)="updateItemValue($event)"，然后创建一个updateItemValue(date: string) 方法并在其中item.value = someConversionFunction(date); 现在如果你问应该使用什么作为转换函数，我不知道。也许Date.parse() 可能会起作用。
<input [ngModel]="item.value | useMyPipeToFormatThatValue"
(ngModelChange)="item.value=$event" name="inputField" type="text" />
这里的解决方案是将绑定拆分为单向绑定和事件绑定——[(ngModel)] 语法实际上包含了这两个绑定。 [] 是单向绑定语法，() 是事件绑定语法。当一起使用时 - [()] Angular 将其识别为简写，并以单向绑定和事件绑定到组件对象值的形式连接双向绑定。
您不能将[()] 与管道一起使用的原因是管道仅适用于单向绑定。因此必须拆分管道，只对单向绑定进行操作，单独处理事件。
有关更多信息，请参阅 Angular Template Syntax。
【讨论】：
我尝试了上面的解决方案，但模型的值是格式化的值，然后返回并给我 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();
}
【讨论】：
下面给出了我的解决方案 searchDetail 是一个对象..
<p-calendar [ngModel]="searchDetail.queryDate | date:'MM/dd/yyyy'" (ngModelChange)="searchDetail.queryDate=$event" [showIcon]="true" required name="queryDate" placeholder="Enter the Query Date"></p-calendar>
<input id="float-input" type="text" size="30" pInputText [ngModel]="searchDetail.systems | json" (ngModelChange)="searchDetail.systems=$event" required='true' name="systems"
placeholder="Enter the Systems">
【讨论】：
<input [ngModel]="item.value | currency" (ngModelChange)="item.value=$event"
name="name" type="text" />
我想对已接受的答案再补充一点。
如果输入控件的类型不是文本，则管道将不起作用。
牢记这一点，节省您的时间。
【讨论】：
您必须使用 [ngModel] 而不是使用 [(ngModel)] 的双向模型绑定。然后将手动更改事件与 (ngModelChange) 一起使用。这是组件中所有双向输入的公共规则。
因为事件发射器上的管道是错误的。
【讨论】：
由于两种方式绑定，为了防止出错：
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was
checked.
你可以像这样调用一个函数来改变模型：
<input [ngModel]="item.value"
(ngModelChange)="getNewValue($event)" name="inputField" type="text" />
import { UseMyPipeToFormatThatValuePipe } from './path';
constructor({
private UseMyPipeToFormatThatValue: UseMyPipeToFormatThatValuePipe,
})
getNewValue(ev: any): any {
item.value= this.useMyPipeToFormatThatValue.transform(ev);
}
如果有更好的解决方案来防止这个错误就好了。
【讨论】：