2014年9月5日金曜日

2014/09/06 その1 AngularJS福岡勉強会(第2回) - form -

01. form.input.$invalid


必須入力のinputが空の場合にテキストボックスの枠を赤くする
☆ポイント☆
 form name="fm"   で fmというFormControllerが使えるようになります。
 input name="inputCd" でfm.inputCdにNgModelControllerが使えます。

02. form.input.$invalid と form.$invalid


form全体でエラーがあるのか項目単位でエラーがあるのか判別できます。
☆ポイント☆
 fm.inputCd.$invalid って書くと個別で不正が無いか確認
 fm.$invalid って書くとform全体で不正が無いか確認できます

03. form.input.$error


$errorで細かいエラーを判別出来ます。
☆ポイント☆
$error.required で必須チェックでエラーなのか
$error.maxlength で最大長でエラーなのか
$error.pattern で許されないパターンの入力なのか判別できます。

04. ngFormで formの入れ子


formを入れ子にして分割出来ます。
☆ポイント☆
ngFormで入れ子にできる
でも標準のHTML5のバリデーションはngFormに気づかない...
しかたないので novalidate で機能をOFF!

05. ngFormをngRepeatで繰り返す


ng-formはng-repeatの中で繰り返しつかえます。

おまけ blurの時に ng-modelを更新したいなぁ


どうやら1.3からng-model-options="{ updateOn: 'blur' }"って指定すると
blurイベント時にng-modelを更新するようにできるらしい!
1.2を使っている方は自分でカスタムディレクティブを作りましょう〜。
stackoverflow:How to let ng-model not update immediately?
http://stackoverflow.com/questions/14722577/how-to-let-ng-model-not-update-immediately




twitterのハッシュタグ

質問やこうした方がいいよ〜とかありましたら、↓につぶやいてください〜

#ng_fukuoka

0 件のコメント:

コメントを投稿