つかびーの技術日記

情報系修士卒のWeb系技術日記です。現在のフォーカス分野はアドテクです。

AngularAgilityでng-repeatを使うとバリデーションが上手く行かないときの対策

   

AngularAgilityというangularのライブラリの使い方についてです。AngularAgilityがどういうものかについては過去の記事をご覧下さい。

今回はAngularAgilityのaa-field-groupディレクティブとng-repeatを同時に使った場合の問題についてです。

結論としては同時に使うときは少しディレクティブに工夫が必要で、公式デモのFriendsの章を参考にすると良いです。

aa-field-groupとng-repeatを同時に使った場合の問題

実際にどんな問題が起きているかはデモを用意したのでご覧下さい。

ng-repeatでフィールドを2つ表示しています。1つのテキストボックスの内容を空にするとバリデーションが働くんですが、空にした1つのフィールドだけでなく、もう一つの方も(つまり2つに対して)バリデーションが働いてしまっています。

色々調べましたがお手上げだったので、思い切って作者に聞きました。

https://github.com/AngularAgility/AngularAgility/issues/68

解決

解決方法ですが、上記のGitHub Issueの所にもありますが、公式デモのFriendsの章を参考にすると良いです。公式デモで使われているソースはGitHubから辿れます。ココとかにあります。

aa-field-groupは使わずにng-model, aa-val-msg, name, aa-field-nameなどを付け、さらにng-repeatの部分にng-formを付けると上手く行きます。

上記のデモではなぜかaa-field-nameが上手く働きませんでしたが、別のところで書いたコードではちゃんとaa-field-nameも上手く動いていました。

皆さんもAngularAgilityとng-repeatを使うときはお気をつけ下さい。

 - AngularJS