Today we will look into Angular Form elements. We are all familiar with HTML forms and its usage. Therefore, I’m not going to discuss about the input controls in detail. In this post, we are going to discuss about forms in the AngularJS context.
A form is a collection of input controls like input, select, textarea. These input controls are ways for a user to enter data and a form is used for grouping related controls together.
Angular Form
We have already seen some of the AngularJS features for binding data of HTML form input fields to the model object. These features make the developer’s task easier when working with forms.
We use ng-model directive to bind an input field to a model property.
Angular form text fields
You are very much familiar with binding input text field to the model property and the value can be displayed using an expression within a pair of curly braces like {{form.name }}
|
1 2 3 |
<input type="text" id="name" ng-model="form.name"> |
This binding is bi-directional; meaning any change in the model is reflected in the view and vice versa.
Angular Form Check boxes
The model property will be set to true if the check box is checked otherwise false. You can use the ng-true-value and ng-false-value directives if you want to use other values instead of true and false. We can use this in the following way:
|
1 2 3 |
<input type="checkbox" ng-model="form.isPermanent" ng-true-value="yes" ng-false-value="no" > |
In this example, the model property will be set to “yes” if it is checked otherwise it will be set to “no”.
We use ng-model directive to bind the selected radio button value to the model property.
|
1 2 3 4 |
<input type="radio" value="male" /> <input type="radio" value="female" /> |
The form.gender will be set to male if we checked the radio button value equals male otherwise female.
Angular Form Example
The following example demonstrates a simple form using angular features.
- Define a FormController in the formApp.
- We use two objects to handle the forms, master and employee and initially master object is set to empty.
- Two methods save and reset is used in this example.
angular.copyis a function in thengmodule used to create a deep copy of source, which should be an object or an array.- We bind the input value to the employee object and it is copied to the master object when we click on the save button.
- The reset function will reset the fields with the values we entered before clicking the save button.
app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var app = angular.module('formApp', []); app.controller('FormController', function($scope) { $scope.master = {}; $scope.save= function(employee) { $scope.master = angular.copy(employee); }; $scope.reset = function() { $scope.employee = angular.copy($scope.master); }; $scope.reset(); }); |
The following HTML contains the form controls we used in our example and you can see how the binding takes place using the angular features.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Angular Form Example</title> </head> <body ng-app="formApp"> <div ng-controller="FormController"> <form novalidate> Name : <input type="text" ng-model="employee.name" /><br /> E-mail : <input type="email" ng-model="employee.email" /><br /> Role : <input type="radio" ng-model="employee.role" value="development" />Development <input type="radio" ng-model="employee.role" value="testing" />Testing<br /> <input type="button" ng-click="reset()" value="Reset" /> <input type="submit" ng-click="save(employee)" value="Save" /> </form> <p>Employee Form = {{employee | json}}</p> <p>Master = {{master | json}}</p> </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script type="text/javascript" src="app.js"></script> </body> </html> |
The following code uses angularJS Filter feature to display the objects in JSON format.
|
1 2 3 4 |
<p>Employee Form = {{employee | json}}</p> <p>Master = {{master | json}}</p> |
You will see the following output on your browser.
That’s all for angular form, we will see the angularJS form validation in the next tutorial.