AngularJSでフォーム入力を検証しよう

スタイルを動的に加える

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
AngularJSが自動的に設定するクラスを使って、要素のスタイルを動的に変更します。
講師:
08:35

字幕

このレッスンでは AngularJS を使って input 要素に入力した データの内容によって CSS のスタイルを 動的に変更してみたいと思います 現在入力フォームには input 要素が 名前からスタートして 姓 メールアドレス パスワードと 4つあります それぞれには皆 model(モデル) ng-model の設定がしてあります 例えばこの先頭の名前 ファーストネームなんですが それには user.firstname とあります それから名前と姓の方は ng-required を true に設定してあります input 要素によって この設定は少しずつ違うのですが 4つすべてに model の設定はしてあります そしてこの form は myform という名前なんですが この注意書きのテキストですけれども ng-show のディレクティブが設定してあって ここに入力した firstname が invalid で touched の場合に この注意書きを表示するという 設定になっています では現在の設定を ちょっと確認してみましょう ファイル>ブラウザーでプレビュー します 名の input 要素のフィールドをクリックして 何も入力せずに次に飛んでしまうと 入力してくださいということで 注意書きが出てきます 姓の方も同様です まずは入れておきましょうか それからメールアドレスの方は やはり入力をしなければいけませんが メールアドレスの形式がありますので これではアドレスとしておかしいですね ですからアドレスとしてきちんとした形式の― スタイルのデータを入れないと 注意書きが出てくるということです パスワードは文字数制限だけですが 6文字入れないといけない ということになっています この input 要素のボーダーを この入力に応じて変えてみたいと思います いきなり AngularJS の設定を加える前に まずはもう一度ブラウザでの動きを 確認してみたいと思います このファーストネームの input 要素です ng-model が設定されていますし ng-required があります placeholder name type とありますけれども class がないということを確認してください 改めてブラウザーでプレビューをします そしてこの名前の所で右クリックをして 「検証」ということで 検証のウインドウを出しました そうすると今ハイライトしているのは この input 要素なんですけれども class は定義されていなかったのに ng- という class が いくつか設定されていますね これは実は AngularJS が 動的に class を加えているんです そして ng-touched となっています ところがもう1個の方 姓名の姓の方ですね ng-untouched と タッチされていないということになっています もう一度リロードしましょう そうするとこの名の方も ng-untouched クリックしてみると 変わりました ng-touched となっていますね 入力しましょう また動的に変わりました ng-valid になっています 姓の方はまだ入力していませんので こちらを見てみると ng-invalid ということですね このように model ng-model のディレクティブで model が設定してあると AngularJS がそのデータの 入力の状況によって 動的に class を設定してくれるんです そしてこの class は CSS で使うことができます ですのでこれを頼りに CSS の設定を加えましょう この HTML ドキュメントの CSS は 別ファイルで style.css ということで CSS のフォルダの中に入っています これを開きたいと思います そしてスタイルを一番最後に 追加したいと思いますので こういうときはすべてを選択して 下向き矢印を押すと すぐ最後に行きます さてここで先程確認した AngularJS が動的に設定する class を セレクタとして指定します まず input 要素ですね そして class ng-valid [後に訂正: invalid] さらに ng-touched ハイフン touched ですね この状況になったらどうするかと いうことなんですが 入力してくださいという表示をしています それに合わせてこの input 要素の ボーダーを設定しましょう border を 1px の solid そしてカラーは赤くしましょう こんな感じのカラーです これで動的に AngularJS が 設定した class に対して スタイルが設定されました ボーダーを赤くするのは 入力がされていない場合ですので invalid ですね valid の方の設定は後でまた加えます ng-invalid で.ng-touched ということで ではこれで保存しましょう そして HTML ドキュメントの方から ブラウザーでプレビューをします 名前を touched クリックして入力せずに他に移ります そうすると「名を入力してください」という 注意書きの他にボーダーが赤くなりましたね 姓の方 やはりクリックしたまま何も入れずに では名前の方を入れましょう そうすると名前の方は ボーダーが元に戻ったんですが 姓は赤いままですね ということで動的にボーダーの設定を 変えることができました 今度は valid ちゃんと入力がされた場合に 入力されたことが分かるような― まあグリーンでしょうね ボーダーを加えたいと思います CSS ファイルに戻りました 今度は先程間違えましたけれども valid の方の設定ですね もうコピーが使えますので コピーをしてしまって 改行を入れてペーストです そして in を除いて valid 有効な場合ですね カラーをそれらしく赤ではなくて 緑のような色にしましょう こんな感じです ではこれで改めて保存をします そして HTML ドキュメントから ブラウザーでプレビューをします 名前を正しく入力して次に移ります グリーンになりました 姓の方も同様ですね メールアドレスぐらいまで 入れておきましょうか そして次に移るとグリーンになるということで ボーダーが赤からグリーンに変わると ボーダーが入力がちゃんとされていないと赤 入力がされればグリーンになる という設定になりました このレッスンでは AngularJS を使って 動的に要素のスタイルを変更する 方法について ご説明しました ng-model model として設定した要素については AngularJS が 自動的に class を設定しますので その class をセレクタとして CSS の設定を加えればいいということでした

AngularJSでフォーム入力を検証しよう

AngularJSはHTMLを拡張するフレームワークです。Webページを動的に操作することができます。このコースではCSSとJavaScriptの基礎を学んだ方向けに、AngularJSを使った入力フォームの処理の仕方について解説します。インストール方法や動作確認、テキストの表示やデータ形式のチェック、入力に応じたスタイルの変更などをひと通り説明します。

1時間12分 (13 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年04月04日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。