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

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

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

# 環境
* Ubuntu 14.04 (VirtualBox)
* AngularJS 1.4.7

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

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

```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をみてみる

* 初期状態
 * 名前欄が空でエラーメッセージが出ている。送信ボタンが押せない状態。<br/>
![dir1.png](https://qiita-image-store.s3.amazonaws.com/0/97052/d406bc28-6634-6edc-52f2-389005f1d79b.png)
<br/><br/>

* 名前欄とユーザーID(2文字)入力。
 * 名前のエラーはなくなったけど、ユーザーIDが4文字以下でエラーが出ている。送信ボタンが押せない状態。<br/>
![dir2.png](https://qiita-image-store.s3.amazonaws.com/0/97052/8ab8f65c-713a-cb25-9c75-a0868c932aa4.png)
<br/><br/>

* 名前欄とユーザーID(4文字)入力。
 * 入力項目のエラーがなくなってエラーメッセージを表示しなくなり、送信ボタンが押せるようになっている。<br/>
![dir3.png](https://qiita-image-store.s3.amazonaws.com/0/97052/8791b1fe-1130-559e-77ed-78ea7b18069e.png)
<br/>

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

# 処理の内容を確認
## 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に値を格納するためのもの？