AngularJS フォーム


AngularJS フォームは入力コントロールのコレクションです。

HTML コントロール

次の HTML 入力要素は HTML コントロールと呼ばれます:

  • input 要素

  • select 要素

  • button 要素

  • textarea 要素

HTMLフォーム

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

AngularJSフォームインスタンス

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

</body>
</html>

インスタンスを実行する»

「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します

Noteノバリデート属性は HTML5 で新しく追加されました。ブラウザのデフォルト認証を使用すると無効になります。

Instance parsing

ng-app ディレクティブは、AngularJS アプリケーションを定義します。

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

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

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

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

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

novalidate 属性はアプリケーションでは必須ではありませんが、標準の HTML5 検証をオーバーライドするには、AngularJS フォームでこの属性を使用する必要があります。