AngularJS Forms


Forms in AngularJS provides data-binding and validation of input controls.


AngularJS Expressions

Input Controls

Input controls are the HTML input elements:

  • <input> elements
  • <select> elements
  • <button> elements
  • <textarea> elements

Data-Binding

Input controls provides data-binding by using the ng-model directive.

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

The application does not initially have a property named firstname.

The ng-model directive binds the input controller to the rest of your application.

Once bound, the property firstname can be referred to inside a controller:

Output :

It can also be referred to elsewhere in the application:

Output :



Checkbox

A checkbox has the value true or false.

Apply the ng-model directive to a checkbox, and use its value in your application.

Output :



Radio Buttons

Bind radio buttons to your application using the ng-model directive.

Radio buttons with the same ng-model can have different values, but only the selected one will be used.

Output :



An AngularJS Form Example

First Name:

Last Name:



form = {{form | json}} master = {{master | json}}

Application Code

Output :