使用 ngModel 中的管道对 INPUT 元件进行角度处理

我有一个 HTML 输入字段。

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

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

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

并得到错误消息:

操作表达式中不能有管道

在此上下文中如何使用管道？

229325 次浏览
小开
最佳答案

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

(ngModelChange)="Template statements"

(ngModelChange) = “ item.value | useMyPipeToFormatThatValue = $event”

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

与模板表达式一样，模板语句使用 模板语句解析器与 模板表达式解析器，并特别支持 赋值(=)和链表达式(带; 或,)。

然而，某些 JavaScript 语法 是不允许的:

  • 新的
  • 增值和减值操作符，+ + 和——
  • 运算符赋值，例如 + = 和-=
  • 按位运算符 | 和 &
  • 模板表达式运算符

所以你应该这样写:

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

普朗克的例子

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

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

不能对管道使用 [()]的原因是，管道只能使用单向绑定。因此，必须拆分管道，以便只对单向绑定进行操作，并分别处理事件。

有关更多信息，请参见角 模板语法。

小开

我尝试了上面的解决方案，但是到达模型的值是格式化的值，然后返回并给我 currencyPipe 错误。所以我不得不这么做

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

关于 addToamount-> change on Fuzzy 的函数，因为 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();
}
小开

下面给出了我的解决方案 searchDetails 是一个对象. 。

<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);
}

如果有更好的解决方案来防止这个错误，那就好了。


提交答案