10

フォームの 1 つで JQuery 入力マスクを とともに使用して[(ngModel)]いましたが、何らかの理由でそれらが連携しません。いずれかを単独で使用しても問題なく動作しますが、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 を表示させたいのです。同じパイプをngModellike this:に追加すると[(ngModel)]="Amount | number:'1.2-2'"、次のエラーが表示されます。

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

入力内でパイプ (または入力マスク) を使用するにはどうすればよい[(ngModel)]ですか?

4

1 に答える 1

28

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

[ngModel]="Amount | number: '1.2-2'" (ngModelChange)="updateAmount($event)"
于 2016-10-31T16:57:59.303 に答える