How to get form input value using AngularJS ?

Last Updated : 01 Aug, 2024

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.