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.

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:

How to Filter Multiple Values in AngularJS ?

PranchalKatiyar

Improve

Article Tags :

How to get form input value using AngularJS ?

Similar Reads

Thank You!

What kind of Experience do you want to share?