form

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

概要
CSSクラス
フォーム送信とデフォルト動作の無効化
使用方法
サンプル

概要

FormControllerをインスタンス化したディレクティブです。もし、name属性が指定されるとフォームコントローラーは、この名前で現在のスコープ上に公開されます。

エイリアス: ngForm

Angularではフォームは入れ子にする事が可能です。これは、全ての子フォームが正当な場合は、外部のフォームも同様に正当であるという事を意味します。しかし、ブラウザは<form>要素の入れ子を許可しないため、Angularは<form>と全く同じように振る舞い、入れ子も可能なngFormディレクティブを提供します。これによりフォームの入れ子を可能にし、ngRepeatディレクティブを使用した動的に生成されるフォーム内のディレクティブの検証に使用すると非常に便利です。補完処理でinput要素のname属性を動的に生成することは出来ないため、 ngFormディレクティブ内に繰り返しのinput要素の各セットをラップして、外側のform要素の入れ子とする必要があります。

CSSクラス

ng-valid: フォームが正当である場合に、設定されます。
ng-invalid: フォームが不正である場合に、設定されます。
ng-pristine: フォームが手つかずの場合に、設定されます。
ng-dirty: フォームに触れられた場合に、設定されます。

フォーム送信とデフォルト動作の無効化

クライアントサイドのAngularアプリケーションのフォームは、送信して遷移される古典的なアプリケーションとは異なり、ブラウザにページ全体をリロードさせること無く、データをサーバへ送信します。そのため、Angularアプリケーション独自の方法で、フォーム送信を処理するためのJavaScriptロジックをトリガーする必要があります。

この理由から、<form>要素のaction属性の指定を必要とせずに、 Angularはデフォルトのアクション(サーバへのフォーム送信)をキャンセルします。

下記の2つの方法から1つを使用して、フォーム送信が発生した際に、どのJavaScriptメソッドを呼び出されるべきかを指定することが出来ます。

ngSubmit: フォーム要素上に配置するディレクティブです。
ngClick: typeがsubmitである、最初のbuttonまたはinput要素(input[type=submit])上に配置するディレクティブです。

重複した実行を防ぐため、ngSubmitまたは、 ngClickディレクティブの片方のみを使用してください。これは、HTMLの仕様に下記の送信ルールが定められているためです。

もし、フォームが1つだけinputフィールドを持つ場合、このフィールドで"ENTER"を打つとフォーム送信をトリガする。(ngSubmit)
もし、フォームが2つ以上のinputフィールドを持ち、ボタンまたはinput[type=submit]が無い場合、"ENTER"を打っても送信はトリガされない。
もし、フォームが1つ以上のinputフィールドを持ち、1つ以上のボタンまたはinput[type=submit]がある場合、いずれかのinputフィールド内で"ENTER"を打つと、最初のボタンまたはinput[type=submit](ngClick)のclickハンドラと、それを包んでいるフォームのsubmitハンドラがトリガされます。

使用方法

このディレクティブは、カスタム要素として使用することができますが、IEの制限に注意してください。

<form [name="{string}"]>
</form>

引数

引数説明

name(optional)

引数	説明
name(optional)	型：`string` フォームの名前です。もし指定されると、フォームコントローラーは、この名前を関連するスコープ内に公開します。

型：string

フォームの名前です。もし指定されると、フォームコントローラーは、この名前を関連するスコープ内に公開します。

サンプル

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <form name="myForm" ng-controller="Ctrl">
      userType: <input name="input" ng-model="userType" required>
      <span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
      <tt>userType = {{userType}}</tt><br>
      <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br>
      <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br>
      <tt>myForm.$valid = {{myForm.$valid}}</tt><br>
      <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
     </form>
  </body>
</html>

function Ctrl($scope) {
  $scope.userType = 'guest';
}

it('should initialize to model', function() {
 expect(binding('userType')).toEqual('guest');
 expect(binding('myForm.input.$valid')).toEqual('true');
});

it('should be invalid if empty', function() {
 input('userType').enter('');
 expect(binding('userType')).toEqual('');
 expect(binding('myForm.input.$valid')).toEqual('false');
});

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
<script>function Ctrl($scope) {
  $scope.userType = 'guest';
}
</script>
  </head>
  <body>
    <form name="myForm" ng-controller="Ctrl">
      userType: <input name="input" ng-model="userType" required>
      <span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
      <tt>userType = {{userType}}</tt><br>
      <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br>
      <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br>
      <tt>myForm.$valid = {{myForm.$valid}}</tt><br>
      <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
     </form>
  </body>
</html>

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。