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).
To get in-Depth knowledge on Angularjs you can enroll for a live demo on Angularjs Online Training
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 = "OnlineITGuru";
});
</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.
Take your career to new heights of success with Angular Training
Example of AngularJS Data Binding to Input Controls
Following is the example of binding data to input controls using ng-model directive in angularjs.
<!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 = "OnlineITGuru";
});
</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>AngularJS Forms Data Binding Example
Following is the example of binding data to input field controls in form element in angularjs applications.
<!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 = "OnlineITGuru";
$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.
Biztalk Online Training 