2019-06

リアクティブフォームにバリデータを設定する。リアクティブフォームの場合、バリデータの設定をテンプレートではなくて、コンポーネントの方に記述する。バリデータはFormControlオブジェクトを作るときに設定する。

今回はボタンがクリックされたときの処理を実装する。リアクティブフォームでは、結び付けられたFormControlオブジェクトを通じて、入力された値を取得する。（値を設定することもでき、値を設定すれば、その値がフォームに表示される）。

コンポーネントにあらかじめフォームオブジェクトなど用意しておき、テンプレートから参照するリアクティブフォームについて学んでいく。リアクティブフォームは、コンポーネントにあらかじめFormGroupオブジェクト、バリデータのオブジェクトなどを作っておく。そして、テンプレートの入力コントロールから、それらのオブジェクトを参照して利用する。

今回はバリデータを設定し、条件を設定することによってアプリの挙動を変える方法について学ぶ。Angularでは、ひとつ条件を指定するのではなく、まとめてバリデータの状態を知ることもできるようになっている。そのためには、「フォーム」でとりまとめていく。

「クリックされているかどうか」「値が変更されているかどうか」によって、出力されるクラスが変わる。そして、バリデータを設定すれば、さらに「バリデータとして指定した条件を満たしているかどうか」によってもクラスが変わる。今回は、テキストボックスが未入力の時は「赤色の下線」、入力されたら「緑色の下線」の表示する方法について学ぶ。

入力フォームを使って、ボタンがクリックされた時の処理の書き方、そしてテキストボックスに入力された値を取得し、数字や文字列を意識しながら足し算アプリを作成していく。

今回はAngularでテキストボックスを操作するモジュールのひとつ、FormsModuleと呼ばれるモジュールを使用する。FormsModuleを使ってテキストボックスから値を読み取るプログラムを作る流れを学んでいく。

今回は入力フォームを作り、ボタンがクリックされたとき何かプログラムを実行したり、メッセージを画面に差し込んだりする方法について学ぶ。