YouTip

AngularJS forms are a collection of input controls.

---

HTML Controls

The following HTML input elements are called HTML controls:

• input elements
• select elements
• button elements
• textarea elements

---

Data Binding

Input controls use the ng-model directive to achieve data binding.

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

With the above code, the application gains a property named firstname.

It is bound to your application via the ng-model directive.

The firstname property can be used in a controller:

Example

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.firstname = "John";
});

Try it Yourself »

It can also be used in other parts of the application:

Example

<form>
    First Name: <input type="text" ng-model="firstname">
</form>

<h1>You entered: {{firstname}}</h1>

Try it Yourself »

---

Checkboxes

A checkbox's value is true or false, and it can be bound using the ng-model directive. Its value can be used in the application:

Example

Show the h1 tag content after the checkbox is checked:

<form>
    Check to show a header: <input type="checkbox" ng-model="myVar">
</form>

<h1 ng-show="myVar">My Header</h1>

Try it Yourself »

---

Radio Buttons

We can use ng-model to bind radio buttons to your application.

Radio buttons use the same ng-model and can have different values, but only the value of the selected radio button will be used.

Example

Display information based on the selected radio button:

<form>
    Choose a favorite:
    <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>

Try it Yourself »

The value of myVar will be either dogs, tuts, or cars.

---

Select Boxes

Use the ng-model directive to bind a dropdown menu to your application.

The value of the ng-model attribute will be the option you selected in the dropdown:

Example

Display information based on the selected dropdown option:

<form>
    Choose a favorite:
    <select ng-model="myVar">
        <option value=""></option>
        <option value="dogs">Dogs</option>
        <option value="tuts">Tutorials</option>
        <option value="cars">Cars</option>
    </select>
</form>

Try it Yourself »

The value of myVar will be either dogs, tuts, or cars.

HTML Forms

HTML forms typically coexist with HTML controls.

---

AngularJS Form Example

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 the browser's default 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 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 to equal the master object.

The ng-click directive invokes the reset() method, which is called when the button is clicked.

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