これはAngularJSを勉強した内容をまとめたものです。

今回したこと

form関連のディレクティブを利用してみる
処理の内容を確認
- ng-model
- required
- ng-minlength,ng-maxlength
- ng-disabled

環境

Ubuntu 14.04 (VirtualBox)
AngularJS 1.4.7

form関連のディレクティブを利用してみる

前回で利用してみたディレクティブは主にデータの表示をするのに利用しそうなものだったので、今回はformで利用しそうなものを使ってみる。

１. 以下のようなhtmlを用意

<!DOCTYPE html>
<html ng-app>
  <head>
    <title>directive_2</title>
    <script src="angular.min.js"></script>
  </head>
  <body>
    <form name="testForm">
      <label>名前</label><br/>
      <input name="user_name" type="text" ng-model="user.name" required/>
      <span ng-show="testForm.user_name.$error.required">名前を入力してください</span>
      <br/>
      <label>ユーザーID</label><br/>
      <input name="user_id" type="text" ng-model="user.id" ng-minlength="4" ng-maxlength="10"/>
      <span ng-show="testForm.user_id.$error.minlength">ユーザーIDは4文字以上にしてください</span>
      <span ng-show="testForm.user_id.$error.maxlength">ユーザーIDは10文字以内にしてください</span>
      <br/>
      <input type="submit" ng-disabled="testForm.$invalid">
    </form>
  </body>
</html>

２. ブラウザでhtmlをみてみる

初期状態
- 名前欄が空でエラーメッセージが出ている。送信ボタンが押せない状態。
名前欄とユーザーID(2文字)入力。
- 名前のエラーはなくなったけど、ユーザーIDが4文字以下でエラーが出ている。送信ボタンが押せない状態。
名前欄とユーザーID(4文字)入力。
- 入力項目のエラーがなくなってエラーメッセージを表示しなくなり、送信ボタンが押せるようになっている。

入力値を検証してエラーメッセージの表示非表示ができた！

処理の内容を確認

ng-model

構文: ng-model="名前"
- ng-modelはモデルとビューの紐付けをする
今回の利用箇所
- <input name="user_name" type="text" ng-model="user.name" required/>
- <input name="user_id" type="text" ng-model="user.id" ng-minlength="4" ng-maxlength="10"/>
今回のように入力値の検証をするのにも必要。
ng-model="hoge"としておくと、指定した要素に入力された値が$scope.hogeに格納される。
- javascriptだとテキストボックスが変更されたかをイベントで取得して、ある要素の中身を書き換えという処理を書かないといけないけど、AngularJSだと常に値をチェックしてくれていて、一度紐付けておけば後は勝手に反映してくれる。

required

構文: required
- 検証の属性で入力必須のものに付ける
利用箇所
- <input name="user_name" type="text" ng-model="user.name" required/>
入力されていなかったら、required検証のエラーのキーが設定される。
- 設定されるのはngModel.NgModelControllerの$error
- このエラーキーが設定されているかをチェックしているのが以下の箇所
  - <span ng-show="testForm.user_name.$error.required">名前を入力してください</span>
    - ng-showは与えられた式がtrueなら要素を表示する。
    - "form名.要素名.$error.エラーキー"で検証結果(入力されているか)が参照できる。

ng-minlength,ng-maxlength

構文: ng-minlength="数値", ng-maxlength="数値"
- 検証の属性で最小文字数、最文字数を指定できる。
利用箇所
- <input name="user_id" type="text" ng-model="user.id" ng-minlength="4" ng-maxlength="10"/>
それぞれ指定した範囲外になったら検証エラーのキーが設定される。
- このエラーキーが設定されているかをチェックしているのが以下の箇所
  - <span ng-show="testForm.user_id.$error.minlength">ユーザーIDは4文字以上にしてください</span>
  - <span ng-show="testForm.user_id.$error.maxlength">ユーザーIDは10文字以内にしてください</span>
  - 検証結果の参照方法はrequiredで書いたのと同様。

ng-disabled

構文: ng-disabled="式"
- 式の結果がtrueの場合、要素に属性"disabled"を設定する
利用箇所
- <input type="submit" ng-disabled="testForm.$invalid">
  - $invalidは入力要素にひとつでもエラーがあったらtrueを返す

そのほかメモ

入力値を検証するのにinput要素にng-modelを書く必要があるけど、検証結果を参照するのは、name属性で指定した名前からだどる
- ここが理解が足りず、非常に疑問でもやもやする。。
- ng-modelで指定した名前はあくまで$scopeに値を格納するためのもの？

AngularJS勉強メモ その4(formまわりのdirective)

今回したこと

環境

form関連のディレクティブを利用してみる

処理の内容を確認

ng-model

required

ng-minlength,ng-maxlength

ng-disabled

そのほかメモ

AngularJS勉強メモその4(formまわりのdirective)