How to get form input value using AngularJS ?
Given a form element and the task is to get the form values input by the user with the help of AngularJS.
Approach:
- We are storing the data in the JSON object after the user enters it in the input element with the help of the Angular.copy(object) method.
- After that, data from the JSON object can be accessed easily.
Example 1: In this example, the data is stored in the JSON object and accessed from it.
HTML
<!DOCTYPE HTML> <html> <head> <script src= </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function ($scope) { $scope.userData = ''; $scope.getData = function (user) { $scope.userData = angular.copy(user); }; }); </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p> How to get form input value in AngularJS </p> <div ng-app="app"> <div ng-controller="controller"> <form action="javascript:void(0)"> firstName: <input type="text" ng-model="user.fName" /><br> lastName : <input type="text" ng-model="user.lName" /><br> <br> <button ng-click="getData(user)"> SAVE </button> </form> <p>FirstName = {{userData.fName}}</p> <p>lastName = {{userData.lName}}</p> </div> </div> </body> </html> |
Output:
Example 2: In this example, the data is stored in the JSON object and the JSON object’s data is printed.
HTML
<!DOCTYPE HTML> <html> <head> <script src= </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function ($scope) { $scope.userData = ''; $scope.getData = function (user) { $scope.userData = angular.copy(user); }; }); </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p> How to get form input value in AngularJS </p> <div ng-app="app"> <div ng-controller="controller"> <form action="javascript:void(0)"> firstName: <input type="text" ng-model="user.fName" /> <br> lastName : <input type="text" ng-model="user.lName" /> <br> Ph.No.: <input type="text" ng-model="user.Phone" /> <br> City: <input type="text" ng-model="user.city" /> <br> <button ng-click="getData(user)"> SAVE </button> </form> <p>User Data Json = {{userData | json}}</p> </div> </div> </body> </html> |
Output:
.png)
.png)