AngularJSのフォームは、データバインディングと入力コントロールの検証を提供します。
入力コントロール
入力コントロールは、HTML入力要素であります：
- 入力要素
- 要素を選択
- button要素
- TEXTAREA要素
データバインディング
入力コントロール使用してデータ・バインディングを提供ng-modelディレクティブを。
<input type="text" ng-model="firstname">
アプリケーションは、名前付きプロパティ持たないfirstname 。
ng-modelディレクティブは、アプリケーションの残りの部分に入力コントローラをバインドします。
プロパティfirstname 、コントローラ内に参照することができます。
例
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.firstname = "John";
});
</script> »それを自分で試してみてください また、アプリケーションの他の場所で参照することができます。
例
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
»それを自分で試してみてください チェックボックス
チェックボックスが値を持っているtrueまたはfalse 。 適用ng-modelチェックボックスに指示をし、あなたのアプリケーションでの値を使用します。
例
チェックボックスがチェックされている場合に、ヘッダーを表示します：
<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>
Pick a topic:
<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 a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option
value="cars">Cars
</select>
</form>
»それを自分で試してみてください myVarにの値がいずれかになりますdogs 、 tuts 、またはcars 。
AngularJSフォーム例
フォーム= {{ユーザー}}
マスター= {{マスター}}
応用コード
<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>
»それを自分で試してみてください  | NOVALIDATE属性はHTML5で新しく追加されました。 これは、任意のデフォルトのブラウザの検証を無効にします。 |
|---|
例の説明しました
NG-アプリディレクティブはAngularJSアプリケーションを定義します。
NG-コントローラディレクティブは、アプリケーションのコントローラを定義します。
NG-モデルディレクティブは、モデル内のユーザーオブジェクトへの二つの入力要素をバインドします。
formCtrlコントローラは、 マスター・オブジェクトに初期値を設定し、reset（）メソッドを定義します。
reset（）メソッドは、 マスター・オブジェクトと等しいユーザーオブジェクトを設定します。
NG-クリックディレクティブは、ボタンがクリックされた場合にのみ、reset（）メソッドを呼び出します。
NOVALIDATE属性は、このアプリケーションのために必要とされていないが、通常は、標準のHTML5の検証を無効にするために、AngularJSの形でそれを使用します。