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

ボタンとメッセージのスタイル変更

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フォームの入力内容に応じて、メッセージとボタンのスタイルを動的に変更します。
講師:
08:24

字幕

このレッスンでは フォームの入力内容に応じて メッセージとボタンのスタイルを AngularJS で動的に変更します 今開いているフォームは input 要素が4つあります 名前と姓とメールアドレス パスワードということですね そしてそれぞれの input 要素には AngularJS のモデルの設定がしてあります ビューをコードビューにして 全体を見やすくしましょう これが最初の名前の firstname ですが ng-model がそれぞれ他の input 要素にも設定されています そしてその他に若干異なる設定があって 例えば firstname の場合ですと ng-required ですね それから lastname の方も 同様です パスワードについては ng-minlength 最小の入力文字数といったものがあります そしてそれらを下に置いた p 要素なんですけれども ng-show という 表示をコントロールする ディレクティブが入っていて 入力がされていなくて touch ― 1回そのフィールドをクリック タッチしたという場合に ちゃんと入れてくださいというメッセージを それぞれ表示するようになっています では現在の状況を確認しておきましょう ファイルから ブラウザーでプレビューをします 名前の所 ファーストネームですが クリックして 何も入力せずに次に移ってしまうと 入力してくださいと出てきます では入力しようと言って戻ると 姓の方にも同様の設定がしてありますから メッセージが出てくると共に ボーダーも色が変わります ちゃんと入力をすれば ボーダーが緑色になってメッセージが消えます メールアドレスも同様に 入力内容が良くないと @マークが無いとかですね その後のドメイン名が無かったりすると このように出てきます ただこのメッセージは― グレーですとちょっと見難いですね やはり注意のメッセージらしく 色を赤く変えたいと思います ではスタイルシートにその設定を加えましょう すでにスタイルシートのファイル style.css は開いていますので 切り替えましょう その一番下にクラスを セレクタで追加することにします 名前は error にしましょう これをエラーメッセージに設定するわけですね カラーは分かりやすく red です それからメッセージの下に 少し余白を加えましょう その方がメッセージが見やすくなると思います padding でその bottom ですね 10px ほど加えます ということでこれを一旦保存します そして HTML ドキュメントに切り替えて メッセージの p 要素に 今定めたクラスを加えましょう class で error ですね ではこれをどんどんコピーしていきます ng-show のあるエラーメッセージに コピーを持っていきます 3つ目コピー 4つ目 ということで 4つの input 要素に class="error" が設定されました ではファイルを保存して ブラウザーで確認してみましょう ブラウザーでプレビューです 名前を入力せずに次に飛びます そうすると入力してくださいということで メールアドレスも飛ばしていきますけれども メールアドレスは変な入力の形式に しないと出て来ないですね @マーク無しとか @マークのあと加えないとかいうことです メッセージのカラーは正しく変更されました もちろん正しく入力すれば メッセージは消えるということですね では次にボタンの設定も行うことにしましょう ボタンも今送信できる状態になっていますが 正しい入力がされていない場合には ボタンが送信できなさそうな グレーにしたいと思います ボタンの方は class="btn" が 設定されていますけれども 特別 Angular の ディレクティブにはありません けれどもこれは form の中に入っています そして form というのは この場合アプリケーションを設定した selecion の要素の子になっています form にも特にディレクティブはありませんが これで form の中のものを コントロールすることができます ではブラウザーで確かめてみましょう ブラウザーでプレビューをします そしてこのフォームですが 右クリックで「検証」で確認してみます そうすると selection の中に form がありますけれども form に class が設定されていますね そして ng- (ハイフン)というのは AngularJS が動的に加えているクラスです そして ng-invalid になっています では名前を入力します この時点ではまだ invalid ですね というのは姓も入れないといけない ことになっています さて姓を入れると ng-valid ということで これで有効に変わりました もっともメールアドレスを それらしい形式で入れないと また ng-invalid ということで 戻ってしまいますが この ng- が invalid でない valid であるという場合には 送信ボタンが押せるという 状態にすればいいわけですね form の要素には AngularJS が動的に class を設定してくれました ですから ng-invalid の場合には ボタンが押せないような グレーにすればいいわけですね そしてこの form の中に button があって button には class として btn が設定されていますので これに対してセレクタを設定し スタイルを定めれば良いでしょう style.css の方に移ります ここでセレクタを設定します .ng-invalid ですね 押せない状態 そのときに form の中にあるclass ng-invalid の form の中にある btn の class の button の要素に対して― background を押せないような gray というふうにしてしまえばいいでしょう これで css のファイルを保存します HTML ドキュメントに移って ブラウザーでプレビューしましょう まだ姓名を入力していませんので 押せないグレーになっています 名前を入れ 姓を入れ ここで一旦押せるようになっていますけれども メールアドレスをきちんと入れないと 送信できる状態になりません これで送信できるということで ボタンのスタイルが正しく変更されました このレッスンでは メッセージに class を定めて テキストのカラーを変えると共に AngularJS が動的に設定する form 要素への class を見て button のカラーを変更するという 方法について ご説明しました

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

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

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

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

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

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