More than 5 years have passed since last update.

Angular Reactive Forms

Last updated at 2019-07-27Posted at 2019-07-26

ReactiveForms（モデル駆動型）とは

公式ドキュメントには以下のように記されています。

リアクティブフォームは、時間とともに入力値が変わるフォームを扱うためのモデル駆動なアプローチを提供します。このガイドでは、シンプルなフォームコントロールの作成と更新から、グループ内の複数コントロールの使用、フォームのバリデーション、高度なフォームの実装の方法を説明します。

でも最初は「ちょっと何言っているかわかりません」状態なので、順を追って説明していきます。

まず、Angularのフォームには２種類あります。

複雑で柔軟な要件に対応することができるフォーム
- テンプレート駆動型と比べると、少しコード量は多いですが、あらゆる要件に対応することができます。
モデル側でオブジェクトの生成、検証を行い、テンプレート側では紐付けを行うのみ。
- ほとんどのコードはモデル側で行うため、htmlはシンプルになります。
同期的
- 全てのコントロールが常に利用可能のため、簡単に親子フォーム間で値の更新が可能です。
テストが簡単
- リクエストのデータには一貫性があり予測性が保証されているためです。

Reactive Forms, Template Driven Forms はうまく使い分けて、実装できれば良いと思います。

Template Driven Formsは比較的に理解しやすいので、初学者に良いと思います。また、簡単なバリデーションチェックなどを行いたい時は素早く実装できるためおすすめです。
Reactive Formsは複雑なバリデーションを自ら作成する必要がある時に良いです。ただ、少し複雑になるのでこの方のように自分なりの簡略化をする工夫をしたら良いと思いました。

また後日、ここに実装編の記事を追加しておきます。