How to Create Multiple Input fields using dynamic forms AngularJS?

There are times, your manager asks you to change the static input field to dynamic multiple input fields easily create able by end-users. By using AngularJS built-in ng-repeat directive, you could easily accomplish the task of creating multiple input fields dynamically (dynamic forms in AngularJS).

I am going to guide you on how to create multiple input boxes of first name, last name, and address dynamically with very less code using dynamic forms in AngularJS.

Note: If you are looking for angular 2+ tutorial on creating dynamic input fields, redirect to the below link.

How to Dynamically Create Multiple Input Fields Dynamically in Template Driven Form in Angular 2+

create multiple inputs dynamically — Demo: Add and Remove Multiple Input Fields

Steps to Create Dynamic Forms AngularJS:

Create an empty array in your controller
Create the input fields inside the section tag with the ng-repeat directive to loop over the array.
Set ng-model dynamically
Create two methods in $scope object to add and remove input fields.

HTML Template For Multiple Input Fields:

<body ng-app="multipleInputs" ng-controller="multipleInputsCtrl">
  <!-- Add User Button --> <button ng-click="addUser()" class="add-user">Add User</button> <!-- List Multiple Inputs -->
  <section ng-repeat="user in users">
    <span class="serial-number">{{ $index + 1 }}.</span>
    <input ng-model="user.firstName" class="users-container-inputs-text" type="text" placeholder="First Name" />
    <input ng-model="user.lastName" class="users-container-inputs-text" type="text" placeholder="Last Name" />
    <input ng-model="user.address" class="users-container-inputs-text" type="text" placeholder="Address" />
    <a class="users-container-inputs-button" ng-click="removeUser(user)">X</a>
  </section>
</body>

In the HTML template, I have not included the CSS styles and extra section tags in order to make it simple and to focus on the functionality. The whole sample code with CSS is available to download at the end of this blog post.

AngularJS Multiple Input Fields:

var app = angular.module('multipleInputs',[]);

app.controller('multipleInputsCtrl',function($scope) {
    $scope.users = [
        {}
    ];
   
   $scope.addUser = function() {
       var newUser = {};
       $scope.users.push(newUser);
   }
   
   $scope.removeUser = function(user) {
       var index = $scope.users.indexOf(user);
       $scope.users.splice(index,1);
   }
});

I think I don’t need to explain anything if you are quite familiar with AngularJS. For beginners, I will explain what’s happening inside the controller. $scope is an object used as a glue between HTML and AngularJS Controller. I created an array $scope.users = [{}] with the value of an empty object.

List Multiple Input Fields using ng-repeat:

The AngularJS built-in ng-repeat directive makes our work easier to look over an array or an object. To loop over our $scope.users array, we should write the HTML as follows:

<section ng-repeat="user in users">
<!-- our code to display input boxes -->
</section>

Its similar to the concept of the ancient “for” loop. For instance, If there are four values in our $scope.users array, the ng-repeat loops four times which in turn displays the HTML content of the section tag four times. The ng-repeat creates a new local scope which has some variables like $index, $first, $last etc. The $index is used to display the index of the current iteration.

{{ $index + 1 }}

I displayed the index of each iteration, by default, the array index starts with 0 so I increments it by 1.

Set ng-model Dynamically:

Inside the ng-repeat, all the input fields should have unique ng-model. This can be easily accomplished because we are looping over an array of object. We can assign the object’s properties to the ng-model like ng-model="user.firstName".

Later on form submission, We can access the value of all the created inputs by accessing the array (users) of objects . For example, console.log(users)will log the ng-model values of all the inputs

Add Multiple Input Fields:

In order to add and remove users (input fields), I created two methods on $scope object. I bound $scope.addUser method in HTML using ng-click directive as follows:

<button ng-click="addUser()" class="add-user">Add User</button>

$scope.addUser = function() {
    var newUser = {};
    $scope.users.push(newUser);
}

Whenever the user clicks the “Add User” button, the $scope.addUser() method will become invoked and pushes a new empty object to our $scope.users array. For example, if I click “Add User” button three times, the $scope.users array will become like this:

$scope.users = [
    {},
    {},
    {},
    {}
]

Well, there are four objects because I initialized the $scope.users array with an empty object.

Remove Input Fields:

The $scope.removeUser method is bound to the HTML using ng-click directive, This method will accept one parameter which is the current user object which we put inside the ng-repeat loop. This method will check the index of the current user and by that index, it removes the user from the $scope.users array using splice method.

<a class="users-container-inputs-button" ng-click="removeUser(user)">X</a>

$scope.removeUser = function(user) {
    var index = $scope.users.indexOf(user); //gets the current user index
    $scope.users.splice(index,1); // remove the user from array by using the index
}

Full Code for Dynamic Inputs Angular 1

DYNAMICALLY CREATE MULTIPLE INPUT FIELDS IN ANGULARJS

var app = angular.module('multipleInputs',[]);

app.controller('multipleInputsCtrl',function($scope) {
    $scope.users = [
        {}
    ];
   
   $scope.addUser = function() {
       var newUser = {};
       $scope.users.push(newUser);
   }
   
   $scope.removeUser = function(user) {
       var index = $scope.users.indexOf(user);
       $scope.users.splice(index,1);
   }
});

<!doctype html>
<html>
    <head>
        <title>Generate Multiple Input Fields Dynamically</title>
        <link rel="stylesheet" href="styles.css"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
        <script src="./multipleInputs.js"></script>
    </head>
    <body ng-app="multipleInputs" class="users-container" ng-controller="multipleInputsCtrl">
        <button ng-click="addUser()" class="add-user">Add User</button>
        <section ng-repeat="user in users">
            <section class="users-container-inputs">
                <span class="serial-number">{{ $index + 1 }}.</span>
                <input class="users-container-inputs-text" type="text" placeholder="First Name"/>
                <input class="users-container-inputs-text" type="text" placeholder="Last Name"/>
                <input class="users-container-inputs-text" type="text" placeholder="Address"/>
                <a class="users-container-inputs-button" ng-click="removeUser(user)">X</a>
            </section>
        </section>
    </body>
</html>

* {
    box-sizing: border-box;
}

input, button {
    outline: none;
}

.users-container {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
}

.add-user {
    background: #02ce8d;
    border: 1px solid #1c9e67;
    color: white;
    border-radius: 8px;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
}

.users-container-inputs-text {
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #dedede;
}

.users-container-inputs {
    flex: 1 1 auto;
    margin-top: 10px;
}

.users-container-inputs-button {
    padding: 6px;
    color: red;
    font-weight: 800;
    cursor: pointer;
}

.serial-number {
    font-size: 18px;
    padding: 6px;
    font-weight: bold;
    color: #1fb182;
}

Conclusion:

I hope this method of creating multiple input fields using AngularJS built-in directive will help you, if you know any other method, please make a comment below. Thank you!