AngularJS Forms Data Binding Tutorial with Example

Here we will learn what are the forms in angularjs, use of forms in angularjs and how to bind data to input controls of forms in angularjs applications with example.

What Is Form in AngularJS?

The Form in angularjs is a collection of controls and it will allow users to enter data. In angularjs form will provide data binding and validation of input controls.

 

Following are the form input controls which will allow users to enter data.

 

                                       - Input controls

 

                                       - Select controls

 

                                       - Textarea controls

 

In angularjs data binding to input controls can be done by using ng-model directive. The ng-model directive in angularjs is used to bind and get data from input controls and it will provide two way data binding by synchronizing data between model to view and vice versa (view to model).

 

For more info on data binding in angularjs check this url data binding in angularjs.

Syntax of AngularJS Data Binding to Input Controls

Following is the syntax of using angularjs ng-model directive to bind data to input controls in form.

 

<script type="text/javascript">

var app = angular.module('formApp', []);

app.controller('formCtrl', function ($scope) {

$scope.fname = "Welcome to ";

$scope.lname = "Tutlane.com";

});

</script>

 

<div ng-app="formApp" ng-controller="formCtrl">

First Name:<input type="text" ng-model="fname" /><br /><br />

Last Name:<input type="text" ng-model="lname" />

</div>

If you observe above syntax we defined ng-model directive in html input controls and using same ng-model values in controller to bind values to input controls.

Example of AngularJS Data Binding to Input Controls

Following is the example of binding data to input controls using ng-model directive in angularjs.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs Data Binding to Controls in Form

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

var app = angular.module('formApp', []);

app.controller('formCtrl', function ($scope) {

$scope.fname = "Welcome to ";

$scope.lname = "Tutlane.com";

});

</script>

</head>

<body>

<div ng-app="formApp" ng-controller="formCtrl">

First Name:<input type="text" ng-model="fname" /><br /><br />

Last Name:<input type="text" ng-model="lname" />

<p>Full Name: {{fname +" "+ lname}}</p>

</div>

</body>

</html>

Now we will run and see the output of above example.

Output of AngularJS Data Binding Example

Following is the result of data binding to input controls using ng-model directive in angularjs application

 

Angularjs data binding to input controls using ngmodel directive

AngularJS Forms Data Binding Example

Following is the example of binding data to input field controls in form element in angularjs applications.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs Data Binding to Controls in Form

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

var app = angular.module('formApp', []);

app.controller('formCtrl', function ($scope) {

$scope.fname = "Welcome to ";

$scope.lname = "Tutlane.com";

$scope.getvalues = function () {

$scope.name = $scope.fname + " " + $scope.lname;

}

});

</script>

</head>

<body>

<div ng-app="formApp" ng-controller="formCtrl">

<form novalidate>

First Name:<input type="text" ng-model="fname" /><br /><br />

Last Name:<input type="text" ng-model="lname" /><br /><br />

<input type="button" value="Get Values" ng-click="getvalues()" />

<p>Full Name: {{name}}</p>

</form>

</div>

</body>

</html>

If you observe above code we defined novalidate property to form. It will disable all default validations in form and allow ng-model attribute to bind data to input controls. 

 

For first name and last name input control values will be set from controller and by clicking on button we can get controls values. Now we will run and see the output of example.

Output of AngularJS Form Example

Following is the result of binding data to form input field controls in angularjs applications.

 

Angularjs bind data to input controls in form example result or output