web-dev-qa-db-ja.com

Angularモデルを変更せずにビューを更新する2コンポーネントモデル

Angular 2.4.0アプリケーションを使用しています。いくつかのフィールドを検証/フォーマットするバッキングJavascriptを含むフォームを使用しています。フィールドのフォーマットが完了すると、ビューはフォーマットから返された値がモデルに添付された元の値と一致する場合は更新されません。ビューを強制的に更新する方法はありますか？モデルは変更されていないため、コンポーネントを強制的に更新しても効果はありません。I jQueryのようなものでビューを個別に更新する必要があると思いますが、最初にもっと良い解決策があるかどうかを確認したかったのです。

コンポーネント：エクスポートクラスコンポーネント{フィールド：文字列

  formatField(updatedField: string) {
    this.field = updatedField.replace(new Regexp("[^\\d]", "g"), ""); // remove everything except numbers
  }
}

HTML：

<html>
  <body>
    <input type="text" [ngModel]="field" (ngModelChange)="formatField($event)">
  </body>
</html>

上記の例で、モデルが「1」の場合、"1;['];["と入力すると、formatFieldは"1"を返しますが、画面には"1;['];["が表示されます。代わりに"1"が表示されることを期待しています（これはformatField呼び出しの戻り値です）。

編集：例（タイプミス）のngModelUpdateをngModelChangeに修正しました。説明にAngular 2バージョンを追加しました。

javascriptangularangular-components
6
Skeeterdrums

ビューを更新するには、モデルに変更を加えた後に変更検出器を明示的に実行する必要があります。その後、モデルを変更すると、ngModelが値を更新します。

constructor(private cd: ChangeDetectorRef) {}

formatField(updatedField: string) {
    this.field = updatedField;
    this.cd.detectChanges();
    this.field = updatedField.replace(new RegExp("[^\\d]", "g"), ""); // remove everything except numbers
}
9
Roman C