How to get form input value using AngularJS ? Last Updated : 01 Aug, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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= "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"> </script> <script> let 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= "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"> </script> <script> let 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: Comment More infoAdvertise with us Next Article How to get the current URL using AngularJS ? P PranchalKatiyar Follow Improve Article Tags : AngularJS HTML-Misc AngularJS-Misc Similar Reads How to get the value of radio button using AngularJS ? In this article, we will see how to get the value of the radio button using AngularJS, along with understanding the basic implementation through illustrations. The value of the checked radio button can be fetched with the help of the ng-model directive that helps to bind the data with the specific e 2 min read How to get the value of the form in Angular ? In this article, we are going to see how to get value from the form in Angular 10. We will use AbstractControl value property to get the form value in an object. Syntax: form.value Return Value: object: It is an object containing form value Approach:Â Create the Angular app to be usedIn app.componen 1 min read How to get the current URL using AngularJS ? In this article, we will see how to get the current URL with the help of AngularJS, along with knowing its basic implementation through the examples. This task can be accomplished in 2 ways, i.e., by implementing the $location.absURL() method to get the complete URL of the current page, & the 2n 2 min read How to Reset an Input Value when Limit Exceeds using AngularJS ? The task is to handle an input field if the number entered by the user in the input exceeds some limit using angularJS. We define a limitTo directive and use it on an HTML input element. This directive is used for all the handling of overflowing limits. The directive calls a function on the keypress 2 min read How to Validate Data in AngularJS ? In this article, we will know to validate the data in Angular JS, along with understanding the various ways to validate the data through the examples. AngularJS allows client-side form validation. Form validation is necessary because it ensures that the data in the form is correct, complete, and are 10 min read How to use AngularJS to Display HTML content value ? The ng-bind-html Directive is used to bind the innerHTML of an HTML element to application data and remove dangerous code from the HTML string. The $sanitize service is a must for the ng-bind-html directive. It is supported by all HTML elements. Syntax: <element ng-bind-html="expression"> Cont 2 min read Like