はじめに

Angularの既存プロジェクトにjoinしたはいいものの、後回しにしていたフォームの改修をしてみると、いろいろハマりポイントあったので書き出しました。
(Angularはフォームが簡単に実装できるって聞いてたので舐めてました)

テンプレート駆動フォームとリアクティブフォーム

そもそもAngularにどんなフォームの書き方があるのか、ここから分かってませんでした。。
Angularには大きく分けて２種類のフォームの書き方があります。

• テンプレート駆動フォーム (Template-driven forms)
• リアクティブフォーム (Reactive forms)

詳しい解説は公式ドキュメントを参照いただきたいのですが、雑感以下の違いがあるかなという印象です。

テンプレート駆動フォーム

• バリデーションチェックをテンプレート側（~.component.html）に記載
• 簡単なフォームであれば手軽に実装できる
• コンポーネント側（~.component.ts）にはほとんど実装しない

リアクティブフォーム

• バリデーションチェックをコンポーネント側（~.component.ts）に記載
• コードが冗長になるが、複雑な要件を実装できる
• フォームの初期値や検証ルールはすべてコンポーネント側（~.component.ts）に実装

私が一番困ったのは、インターネット上のサンプルプログラムがどちらで書いているか分からなかったことです。
見た目上かなり書き方が違う（内部的には同じオブジェクトで管理しているらしい…）ので、どの書き方が正しいのかさっぱり分かりませんでした。

ここでは、２種類あるんだよってことが言いたかったのでそれぞれの書き方の違いなんかは別の記事に譲ります。。

そして、bootstrap

記事の趣旨とはズレてしまうのですが、初見泣かせだと感じたので書かせてください。
リアクティブフォームで実装していると、formGroupやformControlといったワードが出てくるのですが、これがbootstrapのフォーム制御系の記述と重なり、ややこしかったです。
まぁbootstrapの設定はclassにしか記載しないので容易に区別できるはずなのですが、右も左も分かっていなかった私にとっては混乱を深めるものでした。

プロジェクトによってはMaterialデザインを導入しているものもあると思うので、さらにフォームの書き方が変わってくると思います。
フォームの構造上の記載なのか、デザイン上の記載なのか区別する意識が必要だと反省しました。

さいごに

フォームっていろんな技術が詰め込まれる場所だと再認識しました。
やりたいことに対して、構成・機能と見た目を別で調べないと、目的の情報に辿りつかなかったです。

構成や機能は、Angular + やりたいことで検索すればいいのですが、
見た目は、bootstrap + やりたいことで検索しないと欲しい情報が得られませんでした。

補足

bootstrapも3と4でフォーム制御の仕方が変わっているので、注意してね。