AngularJS Tutorial（13）from w3school


An AngularJS form is a collection of input controls.

HTML Controls

HTML input elements are called HTML controls:

input elements
select elements
button elements
textarea elements

HTML Forms

HTML forms group HTML controls together.

An AngularJS Form Example

First Name:

Last Name:



form = {"firstName":"John","lastName":"Doe"}
master = {"firstName":"John","lastName":"Doe"}

Application Code

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

Try it Yourself »

	The novalidate attribute is new in HTML5. It disables any default browser validation.

Example Explained

The ng-app directive defines the AngularJS application.

The ng-controller directive defines the application controller.

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

The formCtrl function sets initial values to themaster object, and defines the
reset() method.

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

The ng-click directive invokes the reset() method, only if the button is clicked.

The novalidate attribute is not needed for this application, but normally you will use it in AngularJS forms, to override standard HTML5 validation.