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

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

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

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

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

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

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

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を使うときはお気をつけ下さい。