AngularJS form


#AngularJS form is a collection of input controls.

HTML Control

The following HTML input elements are called HTML controls:

  • input element

  • select element

  • button element

  • textarea element

HTML form

HTML forms usually exist together with HTML controls.

AngularJS form instance

Instance

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

Running instance»

Click the "Run Instance" button to view the online instance

Note# The #novalidate attribute is new in HTML5. Disabled using the browser's default authentication.
Example parsing

ng-app directive defines an AngularJS application. The

ng-controller directive defines the application controller. The

ng-model directive binds two input elements to the model's user object. The

formCtrl function sets the initial value of the master object and defines the reset() method. The

reset() method sets the user object equal to the master object. The

ng-click directive calls the reset() method and is called when the button is clicked.

The novalidate attribute is not required in your application, but you need to use it in AngularJS forms to override standard HTML5 validation.

←
→