web-dev-qa-db-ja.com

Angular 2:ngModelでパイプを使用する

私はフォームの1つで[(ngModel)]と一緒にJQuery inputmaskを使用していましたが、何らかの理由でそれらが一緒に機能しません。どちらか一方を単独で使用しても問題なく機能しますが、2つを組み合わせると[(ngModel)]が完全に壊れ、新しい入力がコンポーネントに返されません。しばらくこれに取り組んだ後、Angular 2のパイプを使用することは良い解決策になると思いますが、これら2つを連携させる方法を理解できません。

ここに私が私のパイプをテストするために使用しているいくつかのコードがあります

_<input [(ngModel)]="Amount" id="Amount" name="Amount" class="form-control" type="number" autocomplete="off">
<p>Amount: {{Amount | number:'1.2-2'}}</p>
_

12345と入力すると、下の_<p>_タグに12,345.00と表示されます。これは、フィルターを適用する方法とまったく同じですが、フィルターされた量を入力の下に表示したくないので、入力自体を表示します。 12,345.00。同じパイプをngModelに次のように追加すると、[(ngModel)]="Amount | number:'1.2-2'"に次のエラーが表示されます。

パーサーエラー:[式|量]の列10のアクション式にパイプを含めることはできませんnumber: '1.2-2' = $ event]

[(ngModel)]を使用して、入力内でパイプ(または定型入力)を使用するにはどうすればよいですか?

9
Brett

[(ngModel)]は[ngModel]と(ngModelChange)の省略形です。それらを分離すると機能するはずです(非同期パイプで確実に機能します):

[ngModel]="Amount | number: '1.2-2'" (ngModelChange)="updateAmount($event)"
27
Meir