AngularJSでng-repeartを使って動的に入力フォームを作成した時のバリデーション

Tweet

Share on Tumblr

AngularJSでng-repeartを使って動的に入力フォームを作成した時のバリデーション | Bamboo lath 日々の記録AngularJSでng-repeartを使って動的に入力フォームを作成した時に
requiredなどのバリデーションが上手く動かなかったのでそのときの対処方法。

あと、plunker使ってみました。

■通常のエラーチェックの例
http://plnkr.co/edit/AXxoyf2ZU5ti7WQDXW70?p=preview

問題が起きたケースはinputタグなどをng-repeartを使って
複数作成した場合にでした。
たとえば以下のような記述です。
※実際にはモーダル画面の中でinputタグの動的追加みたいなことをしてました。

<form name="mainForm">
	<div ng-repeat="title in titles">
		<input type="text "name="title{{ $index }}" ng-model="titles[$index]" required />
		<span ng-show="mainForm.title{{ $index }}.$error.required">Title required!</span>
	</div>
</form>

ただ自分の場合はこれだと値を空にしてもエラーメッセージが表示されませんでした。
ググってみると

Dynamic validation and name in a form with AngularJS
http://stackoverflow.com/questions/14378401/dynamic-validation-and-name-in-a-form-with-angularjs

上記のようなページが見つかり、上記ページ中の↓のように「ng-form」を
利用することで正常にエラーが表示されるようになりました。
formタグの入れ子の利用ということかな？
これでわざわざnameを変えなくてもバリデーションがかけられます。

<form name="outerForm">
<div ng-repeat="item in items">
   <ng-form name="innerForm">
      <input type="text" name="foo" ng-model="item.foo" />
      <span ng-show="innerForm.foo.$error.required">required</span>
   </ng-form>
</div>
<input type="submit" ng-disabled="outerForm.$invalid" />
</form>

ng-form

formディレクティブの入れ子のエイリアスです。 HTMLはフォーム要素の入れ子を許可していません。 例えば、コントロールのサブグループのみの検証が必要なケースで、入れ子のフォームは便利です。

■ng-repeatを使ったフォームのエラーチェック例
http://plnkr.co/edit/1cccXO6UmCi4K6it78Zj?p=preview