AngularJs get Form Input Value
AngularJs get Form Input Value – Working with the forms in AngularJs we often need to get the form input values in controller. It is very easy to get the form input field values in controller. Here in this tutorial we are going to explain how you can get the form input field values in controller. You can use our online editor to edit and run the code online.
Angularjs get Form Input Value In Controller | Form Data Example
You can get the form data simply as below –
JavaScript Part :
JavaScript Part Contains the following script as below –
Angularjs get Form Data Example:
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope) {
$scope.userData = '';
$scope.getFormData = function(user) {
// copy form data
$scope.userData = angular.copy(user);
// or you can also access data as below
//$scope.userName = user.name; // give name
//$scope.userEmail = user.email; // give email
//$scope.userPhone = user.phone; // give phone
//$scope.userLocation = user.location; //give location
};
});
</script>
|
The above function imports the user object from the form. Here you can manipulate the object as per your need.
Html Part :
Html Part Contains the following html as below –
Angularjs get Form Data Example:
<div ng-app="myApp">
<div ng-controller="myController">
<form action="javascript:void(0)">
Name: <input type="text" ng-model="user.name" /><br />
Email : <input type="email" ng-model="user.email" /><br />
Phone: <input type="text" ng-model="user.phone" /><br>
Location: <input type="text" ng-model="user.location" /><br>
<button ng-click="getFormData(user)">SAVE</button>
</form>
<p>User Data Json = {{userData | json}}</p>
<p>Name = {{userData.name}}</p>
<p>Email = {{userData.email}}</p>
<p>Phone = {{userData.phone}}</p>
<p>Location = {{userData.location}}</p>
</div>
</div>
|
Complete Part :
Now let us combine both javascript and html part to create full example –
Angularjs get Form input value in controller & View
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope) {
$scope.userData = '';
$scope.getFormData = function(user) {
// copy form data
$scope.userData = angular.copy(user);
// or you can also access data as below
//$scope.userName = user.name; // give name
//$scope.userEmail = user.email; // give email
//$scope.userPhone = user.phone; // give phone
//$scope.userLocation = user.location; //give location
};
});
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<form action="javascript:void(0)">
Name: <input type="text" ng-model="user.name" /><br />
Email : <input type="email" ng-model="user.email" /><br />
Phone: <input type="text" ng-model="user.phone" /><br>
Location: <input type="text" ng-model="user.location" /><br>
<button ng-click="getFormData(user)">SAVE</button>
</form>
<p>User Data Json = {{userData | json}}</p>
<p>Name = {{userData.name}}</p>
<p>Email = {{userData.email}}</p>
<p>Phone = {{userData.phone}}</p>
<p>Location = {{userData.location}}</p>
</div>
</div>
</body>
</html>
|
if you run the above example it will produce the output something like this –
Advertisements
