前回（Angularで入力フォームを作るならAngularAgilityを使おう！）はAngularAgilityを紹介しました。これ良いですよね！

今回はAngularAgilityのオプションについて解説します。いくつか公式ドキュメントに載っていなくて、ソースから判断した部分もありますので、間違っていたらすみません。

デモ

解説

まだまだ設定可能なオプションの一部ですが、解説します。

aa-label

AngularAgilityを使うときはaa-field-groupディレクティブを使いますが、ここに指定した変数名がラベル名として画面上に表示されます。ラベル名に日本語を使ったり、英語だとしても自由に命名したいときはaa-labelを利用します。

aa-colとaa-lbl-col

aa-field-groupを使うと、ラベル部分と入力領域部分が生成されますが、デフォルトでラベル部分にはcol-sm-2が、入力領域部分にはcol-sm-3が付きます。これらを自由に設定するのがaa-colとaa-lbl-colです。

aa-col=“sm-6”というように使います。

ちなみにこれらのcol-sm-*クラスはTwitter Bootstrap用です。

aaFormExtensions.validationMessages

aaFormExtensionsプロバイダー内のvalidationMessagesプロパティを変更することでメッセージを自由に変更できます。デモの例では日本語にしています。

on-navigate-away-strategy

on-navigate-away-strategyディレクティブをng-formディレクティブと一緒に指定しておくことで、ページ遷移時の警告処理をカスタマイズすることができます。

警告処理について説明します。フォームに値を入力してリンククリックなどで他のページへ遷移しようとすると警告が出ます。「Are you sure? This page is asking you to confirm that you want to leave - data you have entered may not be saved.」選択肢Stay or Leaveって奴です(ブラウザの機能のダイアログ)。「値入力してますけど、他のページ行っていいの？」って奴です。Web上でも一部のページはご丁寧にこの機能付けてますね。

on-navigate-away-strategy=“none”とすることで、この警告処理を止めることができます。

独自設定をする場合はソースのthis.onNavigateAwayStrategies = {の部分を見れば良いかと思います。

select2

これについては省略します。個人的な感想ですが、公式サンプルの解説だけで十分分かりました。

以上です。

AngularAgility便利なので使ってみてはいかがでしょうか！

まだまだ全貌を把握できていないので、今後も何か分かったら書いて行こうと思います。