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 How to get form input value using AngularJS ? P PranchalKatiyar Follow Improve Article Tags : Web Technologies HTML AngularJS HTML-Misc AngularJS-Misc +1 More 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 Filter Multiple Values in AngularJS ? AngularJS is one of the popular frameworks of many web developers to create dynamic single-page web applications. To make the application more and more dynamic, we can use the filtering of data feature to dynamically show the data to the user as per the input or selection. These provide a better use 6 min read How to push elements in an array using AngularJS ? Given an array and the task is to perform the push operation on the array using AngularJS. The arr.push() method is used to push one or more values into the array, & new values will add at the end of an array. This method changes the length of the array by the number of elements added to the arr 2 min read How to concat strings using AngularJS ? In this article, we will see how to concat strings in AngularJS. There are few ways to concat the strings in AngularJS. In this article, we will see 2 of them.Example 1: In the first example, we are using the '+' operator to concat the strings HTML<!DOCTYPE HTML> <html> <head> < 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 Get the Value of an Input Text Box using jQuery? When working with forms or interactive web pages, sometimes need to get the values entered into the input fields. This article provide a complete guide on how to get the value o an input text box using jQuery. Below are the different approaches to get the value of an input text box using jQuery:Get 2 min read How To Use Reactive Forms in Angular? In Angular, the forms are an important part of handling user input and validation. Reactive Forms offers a model-driven approach that provides greater control and flexibility by managing form controls, validation, and data binding directly within the component class. Core ComponentsFormGroup: Repres 5 min read Like