Angular2でフォームを値を表示するときは、モデルとフォームの値のどっちを使うのがよいか
イシュー
- フォームの値は、FormControlにも保存されているし、modelにも保存されている
フォームの値を取得する場合
import { FormGroup } from '@angular/forms'; hogeForm: FormGroup; hogeForm.get('foo').value
モデルの値を取得する場合
hogeModel = new Hoge({"foo":"bar"}); hogeModel.foo
参考
- Angular Docs
- Angular2のFormについて(その1) - Qiita
- Angular2のFormについて(その2) - Qiita
- Angular2でフォームのバリデーションチェック、動的にCSS追加 | VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで
ライフサイクルを考える
- 「Angular 2」コンポーネントのライフサイクルを知って使いこなす (1/3):CodeZine(コードジン)
- 1 ngOnChanges コンポーネントの入力プロパティ変更時
- 2 ngOnInit 生成時、No.1の実行後
- 3 ngDoCheck 変更を検知したとき、No.1または2の実行後
- 4 ngAfterContentInit 外部コンテンツ初期化時、No.3の実行後(1回だけ)
- 5 ngAfterContentChecked 外部コンテンツ変更時、No.3または4の実行後
- 6 ngAfterViewInit ビュー初期化時、No.5の実行後(1回だけ)
- 7 ngAfterViewChecked ビュー変更時、No.5または6の実行後
- 8 ngOnDestroy 破棄時
Model Driven
参考
- Using Angular 2's Model-Driven Forms with FormGroup and FormControl ― Scotch
- Angular2でのForm 〜Model Driven編〜 - Carpe Diem
- Model Drivenが、Angular2では望ましい
- Angular2でのForm 〜Template Driven編〜 - Carpe Diem
- Template Drivenは、Angular1互換用
(モデル→フォーム)
- 単一方向のフォームの項目で、モデルを定義するときは [hoge]で記載する。(モデル→フォームの順)
- 逆に代入するときのデータの流れも、モデル→フォームなので 、フォームの値を変更しても、モデルは即座には変更されない。
- モデルの値を変更すると、フォームの値も変更されるが、フォームの値を変更しても、すぐにはモデルには反映されない。
- 参照の場合は、モデルでもフォームでもどちらでも良い
- 更新の場合、モデルとフォームの両方に即時に反映させたいのであれば、モデルに代入すべき
- 更新の場合にキャンセルをする可能性があり、モデルはチェックのあとだが、フォームに即時に反映させたいのであれば、フォームに代入
Angularのフォームクラス
参考
- Angular Docs
- FormGroup: FormControlをまとめるクラス
- Angular Docs
- FormControl:
- Angular Docs
- FormBuilder: FormControl を使わなくても Objectから FormGroupを作れるビルダー