AngularJSを使ってお問合せフォームの作成!

AngularJSを使ってお問合せフォームの作成!

AngularJSとは、JavaScriptのMVCフレームワークです。
主にHTMLの拡張を行い、 CRUD操作を得意とします。
※CRUD = Create(生成)、Read(読み取り)、 Update(更新)、Delete(削除)

ちなみにjQueryはDOM操作、アニメーションなどが得意です。

今回はAngularJSでお問合せフォーム(バリデーション付き)の入力画面を作成しながら機能の一部を紹介したいと思います。下記の手順で実際に書いてみましょう。

STEP①

headタグ内に以下のソースを貼り付けます。

これに関してはjQueryとかと同じですね。

STEP②

任意のタグにng-appをつけます。

このディレクティブ(属性)を付けたタグの中が、 AngularJS のテンプレートとして処理されます。

STEP③

フォームタグにname属性とnovalidate属性をつけましょう。

novalidate属性はAngularJSとHTML5のバリデージョンが衝突しないように指定する必要が有ります。

ng-controller=”myController”と書きこの階層より下の要素に対してコントローラーを定義します。

STEP④

フォームの項目を作成します。

名前

inputにng-model属性を追加します。これはJavaScriptのデータ【モデル】をHTMLテンプレート【ビュー】に結び付けるための機能です。

required=”true”を追加します。これを書くことにより必須項目になります。そしてng-maxlength=”10″を追加します。これは10文字以内で抑えてね。といった意味を与えます。

ng-classを使ってsample.nameの値にエラーがある場合にクラス名【error-bg】を追加します。

エラー時に表示させる文章を追加します。ng-show=”sample.name.$error.required”と書かれている場合、【sampleというフォーム内のnameという項目が入力されていない時に表示せよ】という意味になります。同様にng-show=”sample.name.$error.maxlength”と書かれている場合、【sampleというフォーム内のnameという項目の内容が10文字以上の場合に表示せよ】という意味になります。

「必須項目です」が最初から表示されているのは不適切なのでng-ifを追加しsample.name.$touchedと書く。そうすることでfocusが外れた時、何も値が入力されていなかった場合にエラーを表示させます。

 

都道府県

まず下のスクリプト内でappというモジュールを作成します。

そしてその中のmyControllerという定義されたコントローラーにmapsという定義された配列(モデル)を渡します。

ng-options=”map for map in maps”と書いてmyControllerのmaps配列の値をmapという名で受け取ります。

デフォルトのoptionはvalue=””でselectタグ内に直接記述します。これがないと空白のオプションタグが生成されてしまいます。

住所

電話番号

ng-patternディレクティブを使えば正規表現も使ったバリデーションも実装できます。

「入力が正しくありません」と「12文字以内で入力してください」が二つ表示される可能性があるのは不適切なのでng-if=” !sample.tel.$error.pattern”と書いて「入力が正しくありません」というエラーが出ているときは「12文字以内で入力してください」というエラーを表示させないようにします。

メールアドレス

お問い合わせ内容

STEP⑤

送信ボタンの設置します。

ng-ifを使ってsubmitボタンの切り替えを行います。
ng-showは、スタイルで表示、非表示が切り替えられる。ng-ifは、要素が削除されたり、生成されたりする。

ざっくりとした説明になりましたが、これでAngularJSを使ったお問い合わせフォームの完成です。

まとめ

上記コードのサンプルをcodepenで書いたのでご覧ください。

http://codepen.io/hiddemon/pen/ONWBKL

その他

SEO: ロボット型検索エンジンでは、うまくJavaScriptを読み込むことができないためSEO的にはよくありません。

jQuery: AngularJSは標準でjqLiteを備えているみたいですが、機能が限られるため、jQueryを使いたい場合、AngularJSを読み込む前にjQueryを読み込みましょう。


Previous: 「ジャンプ率」でお手軽メリハリデザイン! Next: React.jsだけで作る!バリデーション付きフォームの作り方!

© 2017 ALL CONNECT Inc. All Rights Reserved.