AngularJS Forms

AngularJS forms are collections of input controls.

HTML Controls

The following HTML input elements are called 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">

Through the above code, the application has a property named firstname.

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

The firstname property can be used in the controller:

Example

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

Try it Yourself »

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>

Try it Yourself »

Checkbox

The value of a checkbox is true or false. It can be bound using the ng-model directive, and its value can be used in the application:

Example

After the checkbox is selected, the h1 tag content is displayed:

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

Try it Yourself »

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

Drop-down Menus

You can bind the drop-down menu to your application using the ng-model directive.

The value of the ng-model attribute is the option you selected in the drop-down menu:

Example

Display information based on the selected drop-down menu option:

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

Try it Yourself »

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

HTML Forms

HTML forms usually exist together with HTML controls.

AngularJS Forms Example

First Name:

Last Name:


form = {{user}}

master = {{master}}

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 »
Note novalidateThe attribute is new in HTML5. It disables the browser's default validation.

Example Explanation

ng-appThe directive defines the AngularJS application.

ng-controllerThe directive defines the application controller.

ng-modelThe directive binds two input elements to the model's userobject.

formCtrlThe function setsmasterthe initial value of the object, and definesreset()the method.

reset()The method setsuserthe object equal tomasterthe object.

ng-clickThe directive callsreset()the method, and it 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 the standard HTML5 validation.

Other Extensions