Angular2でフォームを値を表示するときは、モデルとフォームの値のどっちを使うのがよいか

イシュー

  • フォームの値は、FormControlにも保存されているし、modelにも保存されている

フォームの値を取得する場合

import { FormGroup }   from '@angular/forms';
hogeForm: FormGroup;
hogeForm.get('foo').value

モデルの値を取得する場合

hogeModel = new Hoge({"foo":"bar"});
hogeModel.foo

参考

ライフサイクルを考える

Model Driven

参考

(モデル→フォーム)

  • 単一方向のフォームの項目で、モデルを定義するときは [hoge]で記載する。(モデル→フォームの順)
  • 逆に代入するときのデータの流れも、モデル→フォームなので 、フォームの値を変更しても、モデルは即座には変更されない。
  • モデルの値を変更すると、フォームの値も変更されるが、フォームの値を変更しても、すぐにはモデルには反映されない。
  • 参照の場合は、モデルでもフォームでもどちらでも良い
  • 更新の場合、モデルとフォームの両方に即時に反映させたいのであれば、モデルに代入すべき
  • 更新の場合にキャンセルをする可能性があり、モデルはチェックのあとだが、フォームに即時に反映させたいのであれば、フォームに代入

Angularのフォームクラス

参考

  • Angular Docs
    • FormGroup: FormControlをまとめるクラス
  • Angular Docs
    • FormControl:
  • Angular Docs
    • FormBuilder: FormControl を使わなくても Objectから FormGroupを作れるビルダー