web-dev-qa-db-ja.com

AngularのINPUT要素に対するngModel内でのパイプの使用

HTML INPUTフィールドがあります。

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

そしてその値をフォーマットして既存のパイプを使いたいのです。

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

そしてエラーメッセージを取得します。

アクション式にパイプを含めることはできません

この文脈でどうやってパイプを使うことができますか？

angularpipehtml-inputangular2-ngmodel
97
Lonely

テンプレートステートメント内で テンプレート式演算子 （パイプ、保存ナビゲータ）を使用することはできません。

(ngModelChange)="Template statements"

（ngModelChange）= "item.value | useMyPipeToFormatThatValue = $ event"

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

テンプレート式と同様に、テンプレートステートメントはJavaScriptのように見える言語を使用します。テンプレートステートメントパーサーはテンプレート式パーサーとは異なり、特に基本代入（=）と連鎖式（;またはor）の両方をサポートします。

ただし、特定のJavaScriptシンタックスは許可されていません。

  • 新しい
  • インクリメントおよびデクリメント演算子、++および -
  • + =や - =などの演算子の割り当て
  • ビット演算子と＆
  • テンプレート式演算子

それであなたはそれを次のように書くべきです：

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

プランカーの例

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

ここでの解決策はバインディングを一方向バインディングとイベントバインディングに分割することです - 構文[(ngModel)]が実際に包含する。 []は一方向バインディング構文で、()はイベントバインディング構文です。一緒に使用すると - [()] Angularはこれを速記として認識し、一方向バインディングとコンポーネントオブジェクト値へのイベントバインディングの形で双方向バインディングを関連付けます。

パイプで[()]を使用できないのは、パイプは一方向バインディングでしか機能しないからです。したがって、一方向バインディングのみを操作し、イベントを個別に処理するためにパイプを分割する必要があります。

詳しくはAngular テンプレートの構文 をご覧ください。

92
KnowHoper

上記の解決策を試しましたが、モデルに適用される値は書式設定された値であり、返されて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();
  }
6
cabaji99
<input [ngModel]="item.value | currency" (ngModelChange)="item.value=$event"
name="name" type="text" />

受け入れられた答えにもう1点追加したいと思います。

入力コントロールの種類がテキストではない場合、パイプは機能しません。

それを覚えておいて、あなたの時間を節約してください。

5
Tibin Thomas

私の解決策は以下の通りです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">
0
Bhasker The Navigator