1.4.9AngularJSは、フォームに入力されたデータを、形式に応じたいくつかの条件で調べることができます。その結果に応じて要素のスタイルを変えてみましょう。本稿のサンプルでは、JavaScriptコードは書きません。フォームに入力されたデータを確かめる」で、データの形式に応じてメッセージを表示するサンプルとして書いたコード001に手を加えます。フォームの<input>要素の種類ごとに条件が与えられていて、それぞれを満たさないとフィールド下にメッセージが示されます(図001)。ng-modelディレクティブを定めた要素に動的に与えられるクラスAngularJSは、ng-modelディレクティブを定めた<input>要素のデータがどう変わるか監視するとともに、それに応じて要素にclass属性を動的に与えます。ng-requiredディレクティブを加えた<input>要素にフォーカスしただけで入力しなければ、クラスng-touchedとng-invalidが与えられます(図002)。したがって、その場合に要素のスタイルを変えたけれぱ、それらのクラスに対してCSSを定めればよいということです。入力の適否によってフィールドの外枠の色を変える<div>要素にデータが正しいかたちで入力されたら、外枠を緑色にしましょう。逆に、適切でないときは赤枠にします。初めはもとの色のまま変えません。すると、CSSでつぎのようなクラスに対してスタイルを定めればよいでしょう。green;}これで、フィールドに正しく入力すれば外枠が緑、適切でなければメッセージに加えて赤枠で示されます(図003)。以下のコード001に、<style>要素と併せて<body>要素の記述も掲げました(<body>要素はとくに書き替えていません)。以下のサンプル001にファイルをフレームで開きました(フレームのソースでコードが確かめられます)。myForm.name.$touched">氏名を入力してください。ng-show="myForm.email.$invalid">正しいアドレスを入力してください。ng-show="myForm.password.$invalid">パスワードは6文字以上です。