How to get form input value using AngularJS ? Last Updated : 01 Aug, 2024 Comments Improve Suggest changes 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 Must Do Coding Questions - Topic-wise P PranchalKatiyar Follow Improve Article Tags : AngularJS HTML-Misc AngularJS-Misc Similar Reads Interview PreparationInterview Preparation For Software DevelopersMust Coding Questions - Company-wise Must Do Coding Questions - Topic-wiseCompany-wise Practice ProblemsCompany PreparationCompetitive ProgrammingSoftware Design-PatternsCompany-wise Interview ExperienceExperienced - Interview ExperiencesInternship - Interview ExperiencesPractice @GeeksforgeeksProblem of the DayTopic-wise PracticeDifficulty Level - SchoolDifficulty Level - BasicDifficulty Level - EasyDifficulty Level - MediumDifficulty Level - HardLeaderboard !!Explore More...Data StructuresArraysLinked ListStackQueueBinary TreeBinary Search TreeHeapHashingGraphAdvance Data StructuresMatrixStringAll Data StructuresAlgorithmsAnalysis of AlgorithmsSearching AlgorithmsSorting AlgorithmsPattern SearchingGeometric AlgorithmsMathematical AlgorithmsRandomized AlgorithmsGreedy AlgorithmsDynamic ProgrammingDivide & ConquerBacktrackingBranch & BoundAll AlgorithmsProgramming LanguagesCC++JavaPythonC#Go LangSQLPHPScalaPerlKotlinWeb TechnologiesHTMLCSSJavaScriptBootstrapTailwind CSSAngularJSReactJSjQueryNodeJSPHPWeb DesignWeb BrowserFile FormatsComputer Science SubjectsOperating SystemsDBMSComputer NetworkComputer Organization & ArchitectureTOCCompiler DesignDigital Elec. & Logic DesignSoftware EngineeringEngineering MathematicsData Science & MLComplete Data Science CourseData Science TutorialMachine Learning TutorialDeep Learning TutorialNLP TutorialMachine Learning ProjectsData Analysis TutorialTutorial LibraryPython TutorialDjango TutorialPandas TutorialKivy TutorialTkinter TutorialOpenCV TutorialSelenium TutorialGATE CSGATE CS NotesGate CornerPrevious Year GATE PapersLast Minute Notes (LMNs)Important Topic For GATE CSGATE CoursePrevious Year Paper: CS exams Like