How to get form input value using AngularJS ? - GeeksforGeeks

01 Oct, 2020
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>        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="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">    </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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
AngularJS-Misc
HTML-Misc
AngularJS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Auth Guards in Angular 9/10/11
Angular PrimeNG Calendar Component
How to bundle an Angular app for production?
What is AOT and JIT Compiler in Angular ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property