SundayHacking

小ネタです。

http://docs.angularjs.org/api/ng.directive:form

によるとこのディレクティブは普通に<form>とすれば使えるのですが、 ネストするときは、<ng-form>とする、と書かれています。

これを利用したシーンがあったのでメモしておきます。

フォームをバリデーションする機能があります。例えば、次のように使います。

<form name="myForm">
  <input required ng-model="text"/>
  <button ng-disabled="!myForm.$valid" ng-click="submit()"/>
</form>

このようにすると、テキストフィールドが空のときはボタンが押せないようにできます。

さて、テキストフィールドをng-repeatで生成したい場合はどうしましょう。特に、個々のテキストフィールドごとに例えばアスタリスクマークをつけて、空であることを表示したい場合です。

こういうときにネストしたformを使うとよいようです。

<form name="myForm">
  <ul>
    <li ng-repeat="item in items">
      <ng-form name="itemForm">
        <input required ng-model="item.text"/>
        <span ng-show="!itemForm.$valid">*</span>
      </ng-form>
    </li>
  </ul>
  <button ng-disabled="!myForm.$valid" ng-click="submit()"/>
</form>

個人的にはitemFormのスコープが分かりにくいのですが、そういうものみたいです。nameでinterpolationできないからだとか。

これは使いこなせば便利そうですね。requiredだけでなく、正規表現でパターンを限定したりもできます。

詳しくはこちら。

http://docs.angularjs.org/api/ng.directive:input.text

type="email", type="url", type="number"もあります。