AngularJS フォーム

AngularJS フォームは入力コントロールの集合です。

HTML コントロール

以下の HTML input 要素は HTML コントロールと呼ばれます:

  • input 要素
  • select 要素
  • button 要素
  • textarea 要素

データバインディング

Input コントロールは ng-model ディレクティブを使用してデータバインディングを実現します。

<input type="text" ng-model="firstname">

上記のコードにより、アプリには firstname という名前のプロパティが追加されます。

これは ng-model ディレクティブによってアプリにバインドされます。

firstname プロパティはコントローラー内で使用できます:

例

var app = angular.module('myApp', []); app.controller('formCtrl', function($scope) { $scope.firstname = "John"; });

試してみる »

アプリの他の場所でも使用できます:

例

<form> First Name: <input type="text" ng-model="firstname"> </form> <h1>You entered: {{firstname}}</h1>

試してみる »

Checkbox（チェックボックス）

checkbox の値は true または false で、ng-model ディレクティブを使用してバインドでき、その値はアプリ内で使用できます:

例

チェックボックスが選択されると h1 タグの内容が表示されます:

<form> Check to show a header: <input type="checkbox" ng-model="myVar"> </form> <h1 ng-show="myVar">My Header</h1>

試してみる »

ラジオボタン

ng-model を使用してラジオボタンをアプリにバインドできます。

ラジオボタンは同じ ng-model を使用し、異なる値を持つことができますが、選択されたラジオボタンの値のみが使用されます。

例

選択されたラジオボタンに応じて情報を表示します:

<form>オプションを選択してください:<input type="radio" ng-model="myVar" value="dogs">Dogs <input type="radio" ng-model="myVar" value="tuts">Tutorials <input type="radio" ng-model="myVar" value="cars">Cars </form>

試してみる »

myVar の値は dogs、tuts、または cars にできます。

ドロップダウンメニュー

ng-model ディレクティブを使用してドロップダウンメニューをアプリにバインドできます。

ng-model 属性の値は、ドロップダウンメニューで選択したオプションです:

例

選択されたドロップダウンメニューのオプションに応じて情報を表示します:

<form>オプションを選択してください:<select ng-model="myVar"> <option value=""> <option value="dogs">Dogs <option value="tuts">Tutorials <option value="cars">Cars </select> </form>

試してみる »

myVar の値は dogs、tuts、または cars にできます。

HTML フォーム

HTML フォームは通常、HTML コントロールと一緒に存在します。

AngularJS フォームの例

First Name:

Last Name:


form = {{user}}

master = {{master}}

アプリケーションコード

<div ng-app="myApp" ng-controller="formCtrl"> <form novalidate> First Name:<br> <input type="text" ng-model="user.firstName"><br> Last Name:<br> <input type="text" ng-model="user.lastName"> <br><br> <button ng-click="reset()">RESET</button> </form> <p>form = {{user}}</p> <p>master = {{master}}</p> </div> <script> var app = angular.module('myApp', []); app.controller('formCtrl', function($scope) { $scope.master = {firstName: "John", lastName: "Doe"}; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset(); }); </script>

試してみる »
Note novalidateこの属性は HTML5 で新しく追加されました。ブラウザのデフォルト検証を無効にします。

例の解説

ng-appディレクティブは AngularJS アプリを定義します。

ng-controllerディレクティブはアプリのコントローラーを定義します。

ng-modelディレクティブは2つの input 要素をモデルの userオブジェクトにバインドします。

formCtrl関数はmasterオブジェクトの初期値を設定し、reset()メソッドを定義します。

reset()メソッドはuserオブジェクトをmasterオブジェクトと等しく設定します。

ng-clickディレクティブはreset()メソッドを呼び出し、ボタンがクリックされたときに呼び出します。

novalidate 属性はアプリで必須ではありませんが、標準の HTML5 検証を上書きするために AngularJS フォームで使用する必要があります。

その他の拡張