AngularJS フォーム

AngularJSのフォームは、入力コントロールのデータバインディングと検証を提供します。

入力コントロール

入力コントロールはHTML入力要素です：

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

データバインディング

データバインディングを使用して インストラクションはアプリケーションコントローラを定義します。 データバインディングを提供するディレクティブがあります。

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

このアプリケーションには、 firstname の属性。

インストラクションはアプリケーションコントローラを定義します。 このディレクティブは、アプリケーションの残りの部分に入力コントローラーをバインドします。

属性 firstname、コントローラーで参照できます：

例

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.firstname = "Bill";
$scope.reset();
});

</script>

アプリケーションの他の場所でも参照できます：

例

<form>
  名前: <input type="text" ng-model="firstname">
</form>
<h1>入力したのは：{{firstname}}</h1>

</script>

チェックボックス

チェックボックスの値は true または falseを インストラクションはアプリケーションコントローラを定義します。 このディレクティブはチェックボックスに適用され、アプリケーションでその値を使用します。

例

チェックボックスが選択されている場合にタイトルを表示：

<form>
  チェックボックスを選択してタイトルを表示：
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">私のタイトル</h1>

</script>

ラジオボタン

使用 インストラクションはアプリケーションコントローラを定義します。 このディレクティブは、アプリケーションにラジオボタンをバインドします。

同じ インストラクションはアプリケーションコントローラを定義します。 のラジオボタンの値は異なることができますが、選択された値のみを使用します。

例

選択されたラジオボタンの値に基づいてテキストを表示します：

<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>

</script>

myVarの値は dogs、tuts または cars。

ドロップダウンリスト

使用 インストラクションはアプリケーションコントローラを定義します。 ディレクティブは、アプリケーションにドロップダウンリストを選択ボックスをバインドします。

インストラクションはアプリケーションコントローラを定義します。 属性で定義された属性は、選択ボックスで選択されたオプションの値を持ちます。

例

選択されたオプションの値に基づいてテキストを表示します：

<form>
  トピックを選んでください：
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">チュートリアル
    <option value="cars">Cars
  </select>
</form>

</script>

myVarの値は dogs、tuts または cars。

AngularJS フォームサンプル

名： Bill 姓： Gates リセット form = {"firstName":"Bill","lastName":"Gates"} master = {"firstName":"Bill","lastName":"Gates"}

アプリケーションコード

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    名字：<br>
    <input type="text" ng-model="user.firstName"><br>
    姓氏：<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="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: "Bill", lastName: "Gates"};
  $scope.reset = function() {
    $scope.user = angular.copy($scope.master);
  }
  $scope.reset();
$scope.reset();
});

</script>

実際に試してみてください novalidate

属性は HTML5 での新しい属性です。デフォルトのブラウザバリデーションを無効にします。

Example Explained ng-app

インストラクションは AngularJS アプリケーションを定義します。 ng-controller

インストラクションはアプリケーションコントローラを定義します。 ng-model

インストラクションはモデルの user オブジェクトに2つの入力要素をバインドします。 formCtrl master コントローラを定義する reset() メソッド。

reset() オブジェクトを初期値に設定し、 user オブジェクトを user に等しく設定する master オブジェクト。

ng-click ボタンをクリックしたときにのみ呼び出される reset() メソッド。

このアプリケーションは novalidate 属性を必要としませんが、通常は AngularJS フォームで標準の HTML5 バリデーションをオーバーライドするために使用されます。