はじめに
Angularには、フォームの作成方法として、リアクティブフォームとテンプレート駆動フォームの2つがあります。
今回はその２つのフォームの違い・特徴を解説し、どちらのフォームを使ったらよいか記載していきます。
リアクティブフォーム
リアクティブフォームとは？
リアクティブフォームは、FormControlやFormGroup、FormBuilderを使ったやり方です。
特徴
- TypeScript側で制御：TypeScript側でバリデーションなどのフォームの制御を行っています。
- テンプレート駆動フォームより機能が多い：単純に機能の豊富さは、テンプレート駆動フォームより優れています。
- グループ化できる：FormGroupやFormBuilderを使って、フォームデータの設定をまとめて管理することができるため、たくさんの入力フォームがある場合に向いています。
- スケーラビリティ・再利用性・テスト性が高い：公式としても、このように宣言されていて性能が高い特徴があります。
- 厳密な型定義：Angular 14から、フォームの型を定義することで、any型などの曖昧な型を禁止して厳密にすることができるようになりました。
テンプレート駆動フォーム
テンプレート駆動フォームとは？
テンプレート駆動フォームはngModelを使った方法のフォームになります。
特徴
- テンプレート側が制御：フォーム値のデータフローやバリデーションを、テンプレート側が制御してます。
- 作るのが簡単：FormBuilderなどを使う必要がないため、少ないコード量で実装できます。
- 習得しやすい：覚えることが少なくても、簡単に動かせます。
どちらを使うべきか
シンプルなフォームを作る場合は、テンプレート駆動フォームを使い、
それ以外で、本格的なフォームを使う場合は、リアクティブフォームを使うのがいいでしょう。
もしくは、テンプレート駆動フォームでできることは、基本リアクティブフォームでもできるため、リアクティブフォームだけで対応するのもよいかと思います。
