AngularJS Forms

AngularJS Forms are collections of input controls.

HTML Controls

The following HTML input elements are referred to as HTML controls:

• input element
• select element
• button element
• textarea element

Data Binding

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

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

The above code creates an attribute named firstname.

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

The firstname attribute can be used in the controller:

Example

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

It can also be used elsewhere in the application:

Example

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

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

Checkbox

The value of a checkbox is either true or false, and it can be bound using the ng-model directive, with its value being usable in the application:

Example

Display h1 tag content when the checkbox is checked:

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

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

Radio Buttons

We can bind radio buttons to our application using the ng-model directive.

Radio buttons sharing the same ng-model 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 an option:
    <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>

The value of myVar can be dogs, tuts, or cars.

Dropdown Menu

The dropdown menu can be bound to your application using the ng-model directive.

The value of the ng-model attribute is the option selected in the dropdown menu:

Example

Display information based on the selected dropdown menu option:

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

The value of myVar can be dogs, tuts, or cars.

HTML Form

An HTML form usually coexists with HTML controls.

AngularJS Form Example

form = {{user}}

master = {{master}}

Application Code

<div ng-app="myApp" ng-controller="formCtrl">
  &lt;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>

| | The novalidate attribute is new in HTML5. It disables the default browser validation. | | --- | --- |

Example Explanation

ng-app directive defines the AngularJS application.

ng-controller directive defines the application controller.

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

The formCtrl function sets the initial values 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, invoked when the button is clicked.

The novalidate attribute is not required in the application but is used in AngularJS forms to override standard HTML5 validation.