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

ディレクティブで入力に応じて表示を切り替える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
AngularJSのディレクティブで、入力に応じて表示・非表示を切り替えることができます。
講師:
03:57

字幕

このレッスンでは AngularJS を使って input 要素のフィールドに データがあるかないかによって 表示と非表示を切り替える方法について ご説明しましょう 今現在は ng-app が section に設定されていて 各 input 要素にはそれぞれ ng-model ということで user. の後に それぞれプロパティが設定されています ですからこの user というオブジェクトの中に 各 input 要素の データが表示される ということになります 今現在の状態を確認しておきましょう 「ファイル」>「ブラウザでプレビュー」 します 入力してみますと まず名前ですね 2つぐらいでいいでしょう このように user というオブジェクトの中に それぞれのデータが プロパティとして入っています 今回はこの最初のデータ これがあるかないかによって 表示を切り替えるような 形にしたいと思います この部分 テキストはちょっと打ち変えて このテキストを 入力をしたら出す というふうに設定をしなおしてみます まず入力を確認したい 入力してほしい input のタグに ディレクティブを1つ追加します ng-required です そしてこれは true false で設定するのですが 入力して下さい という時には true と設定します そうすることによって 入力したかしないかを AngularJS のほうで 確認することができます そして今度はこの p 要素 p タグのほうにも ディレクティブを加えます ng-show これが表示 非表示を 切り替えるためのディレクティブです そしてこの中に この form は myform ですね myform の中の .firstname これが required に設定すると ちゃんと入っているかどうか ということが確認できます そのためには .$invalid と ということで入力がないと 有効でないと このテキストが表示されます ということは firstname 姓名の名が入ってないわけですから 入力してください というテキストを書きましょう 「名を入力してください」 では確かめてみましょう これで 「ファイル」を「保存」して 「ブラウザでプレビュー」します 「名を入力してください」と 書いてありますね 言われた通り入力をしましょう そして入力をした瞬間に 消えるということです このレッスンでは input 要素のフィールドに データがあるかないかによって 表示を切り替えるという方法について ご説明しました そのために使ったディレクティブは 2つありまして まず入力を要求する場合 その input 要素に ng-required を true として 設定します 次に ng-show で表示 非表示を 切り替えるのですが その必要なデータの後に .$invalid これでデータがなかったという設定になる ということでした

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

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

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

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

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

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