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

フォームの送信時の処理をJavaScriptで加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フォームの送信のときに行う処理を、JavaScriptでコントローラとして加えます。
講師:
07:16

字幕

このレッスンではフォームの 送信ボタンを押して データを送信した時に行いたい機能を JavaScript で 加えてみることにします この HTML ドキュメントでは アプリケーション ng-app は myApp という名前で定められていて そしてコントローラーが ng-controller ng ハイフォン controller ですね RegistrationsController という名前で定められています これらは外部ファイル app.js ということで設定されていますので そちらのほうで追加をしていきます では app.js 開いていますので こちらに切り替えましょう ではまたこの scope scope というのは HTML ドキュメントと データをやり取りする時の ターゲットになる部分 参照部分です ここに新たなプロパティを追加します 「 scope. 」 ということで コピーをしまして そして register という名前です これはプロパティの形をしていますけれども function で定めることにします つまり HTML ドキュメントの中から register() ということで このファンクションが実行される ことになるわけです ではこれを改行して そしてここでまた scope に message という変数を 設定しているのですがこれを この関数の中に入れてしまいましょう そうすると register という 関数が実行されると message という変数が 設定されて「ようこそ」という文字が入る そしてその時に HTML ドキュメントの ほうでもこの「ようこそ」という文字が 参照できるようになるという形になりました ではこれで保存します HTML ドキュメントの方に 切り替えましょう register という関数を実行したい いつ実行したいかというと 送信ボタンを押したらと 送信ボタンというのは submit というタイプになっています button-type = "submit" です この機能がフォームに対して実行されたときに 関数を呼び出すという形にしたいと思います ではまた画面がちょっと コードの範囲が狭いので ビューをコードに切り替えて 全体見えるようにします submit が実行されると フォームの方からそれが 確認できるようになります ここは AngularJS の ディレクティブで確認することにします ディレクティブを追加して ng-submit です 実行したいこと 関数ですね このダブルクオテーションの中に書きます register でしたね そして関数を呼び出しますので () と丸かっこを書きます そして実行したら表示するようにしたいです このままですと message が いつでも表示されるような 形になってますので ここは message の中身が 入ったら表示するというふうに したいと思います ディレクティブを加えます ここは表示をコントロールする ng-show ですね そして message の内容が 入ったらということなので これをコピーして持っていきます では確認してみましょう ファイルを保存して 「ブラウザでプレビュー」です 「以下の項目を入力してください」という テキストの下にはまだ何も表示されていません ではちょっと入力をしましょう 名前と姓ですね ボタンが送信できるような色に 変わりましたので ここで送信ボタンを押してみます ここで submit が起こります そうすると「ようこそ」という 文字が表示されました せっかくですから 入れた内容を反映させましょう ここに入力したものを データとして持ってきたいと思います 最初の input 要素 名前が firstname ですけれども ng-model ということで モデルが設定されています user.firstname これで参照できますので これをコピーしておきましょう そして JavaScript の ファイルのほうをいじりますので app.js に切り替えます では「ようこそ」 今の firstname を 加えることにしましょう コピーしておきましたのでペーストします ただしここで忘れてならないのは scope ですね この scope を参照して これをターゲットとすることで お互いに JavaScript ファイルと HTML ドキュメントの間で データの参照ができますので これをコピーして持ってきます ようこそ 呼び捨てもなんですね 英語だとそんなことは気にしないんでしょうが 日本語だとちょっと不自然な感じがするので さん付けぐらいしておきましょう ではこれでファイルを保存します HTML ドキュメントの方に 切り替えましょう そしてブラウザでプレビューします 名前を「姓」「名」入れましょう 名からですね そして姓と 送信ボタンをクリックします そうするとこのデータが取られて 「ようこそ Fumio さん」ということで 正しくデータのやり取りが 出来たということです このレッスンではフォームを 送信するときに行う処理を JavaScript で コントローラとして加えました 送信ボタンを押したとき フォームの中の submit のボタンを押したときですね その場合をとらえるにはフォームに対して ng-submit という ディレクティブを設定し そこで実行する 呼び出すファンクションを 文字列の中に書き込みます その上でこの関数を JavaScript の ほうで定義するということで コントローラに定義したファンクションの中で さらに今呼び出そうとしている register というファンクションを定義し そこで scope を参照しながら 変数を設定し同じく scope を参照して HTML ドキュメントの中の データを取り出したうえで 文字列と組み合わせて変数に設定し 改めて HTML ドキュメントのほうで 表示したということです

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

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

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

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

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

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