在Angular2-View中在INPUT元素的ngModel中使用管道

我有一個HTML INPUT字段。在Angular2-View中在INPUT元素的ngModel中使用管道

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

，我想格式化它的價值和使用現有的管道：

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

，並得到該錯誤消息：

不能有一個管道中的動作表情

如何在此環境中使用管道？

來源

2016-09-22 Lonely

不能模板語句中使用Template expression operators（管道，節省導航）：

(ngModelChange)="Template statements"

~~（ngModelChange）= 「item.value | useMyPipeToFormatThatValue = $事件」~~

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#template-expressions

所以你應該寫下如下：

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

Plunker Example

來源

2016-09-22 15:31:02 yurzui

有人可以解釋爲什麼它有像這樣被分割出去？我正在嘗試將日期綁定到類型爲date的輸入：[（ngModel）] =「model。endDate | date：'y-MM-dd'「，管道將不起作用。但是，如果我不使用banana語法並使用上面的拆分語法，它可以正常工作。 –

這是否真的起作用？它不起作用它說在一個動作表達式中不能有一個管道 – rampantNinja

這對我有用！@BlakeRivell「[]」從數據源單向綁定屬性來查看目標，你可以改變它如何用管道顯示。當使用「（）」綁定時，另一種方式是改變格式在這裏是沒用的。所以我想這就是爲什麼香蕉放在一個盒子裏「[（）]」不能用管子分割它們你可以在這裏閱讀更多關於它的信息：https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax –

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

這裏的解決方案是分裂成結合單向綁定和事件結合 - 其語法[(ngModel)]實際上涵蓋。 []是單向綁定語法，而()是事件綁定語法。一起使用時--Angular將此識別爲簡寫形式，並以單向綁定和綁定到組件對象值的事件的形式連接雙向綁定。

您不能在管道上使用[()]的原因是管道只能使用單向綁定。因此，必須將管道拆分爲僅在單向綁定上進行操作並分別處理事件。

有關詳細信息，請參閱角度Template Syntax。

來源

2017-02-06 07:45:55 KnowHoper

好的解釋 –

如何添加條件表達式，如|號碼：'3.2-5'？ – Protagonist

這個解釋比第一個更好。謝謝 – cabaji99

我試過上面的解決方案，但去模型的價值是格式化的值，然後返回並給我currencyPipe錯誤。所以我必須

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

而對addToAmount函數 - >模糊更改導致ngModelChange給我光標問題。

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

並刪除其他非數值。下面這裏searchDetail是一個對象

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

來源

2017-08-25 19:14:06 cabaji99

我的解決辦法是賦予..

<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">

來源

2018-01-04 09:54:42

在Angular2-View中在INPUT元素的ngModel中使用管道

回答

相關問題