In this article I will explain with an example, how to make dynamic HTML Input (Form) fields i.e. dynamically add and remove HTML Input (Form) fields using AngularJS.
This article will explain how to dynamically add / remove HTML Input (Form) fields created using ng-repeat directive in AngularJS.
 
 
Dynamically Add / Remove HTML Input (Form) field using AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Note: If you want to learn more about these directives please refer my article Introduction to AngularJS.
 
The HTML DIV consists of an HTML Table which will be populated from JSON array using ng-repeat directive.
Each row of the HTML Table consists of two HTML Input (Form) fields and a Button. The Button has been assigned ng-click directive and the $index variable is passed as parameter to the Remove function.
The Footer row of the HTML Table consists of two HTML Input (Form) fields and a Button which has been assigned ng-click directive to call the Add function.
Note: If you want to learn more about ng-click directive, please refer my article ng-click directive example.
 
Populating the HTML Table
An array of JSON objects is created and assigned to the Customers JSON array.
The ng-repeat directive as the name suggests repeats the element based on the length of the collection, in this scenario it will repeat the TR element (HTML Table Row).
The TBODY element of the HTML Table has been assigned ng-repeat directive in order to iterate through all the items of the Customers JSON array.
For each JSON object in the Customers JSON array, a TR element (HTML Table Row) with two HTML Input (Form) fields and a Button is generated and appended into the HTML Table.
 
Dynamically adding HTML Input (Form) fields on Button click
When the Add button is clicked, the Add function of the Controller gets called. Inside the Add function, a new JSON object is created and the values of the Name and Country HTML Input (Form) fields are assigned to the respective Name and Country properties.
Finally the JSON object is added to the JSON array which ultimately re-populates the HTML Table and thus the HTML Input (Form) fields are added.
 
Dynamically removing HTML Input (Form) fields on Button click
When the Remove button is clicked, the Remove function of the Controller gets called. Inside the Remove function, the JSON object to be removed is determined using the Index value.
Note: The $index variable is used to get the Index of the Row created by ng-repeat directive. For more details, please refer my article Get Row Index of HTML Table Row using AngularJS.
 
The Name value is fetched and it is used to display the JavaScript Confirmation Box.
Note: If you want to learn more on displaying JavaScript alert with AngularJS, please refer my article AngularJS: Display (Show) JavaScript Confirm Dialog box.
 
If the Confirmation response is TRUE then the JSON object is removed from the JSON array and the HTML Table is re-populated and thus the HTML Input (Form) fields are removed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $window) {
            $scope.Customers = [
                { Name: "John Hammond", Country: "United States" },
                { Name: "Mudassar Khan", Country: "India" },
                { Name: "Suzanne Mathews", Country: "France" },
                { Name: "Robert Schidner", Country: "Russia" }
                ];
 
            $scope.Add = function () {
                //Add the new item to the Array.
                var customer = {};
                customer.Name = $scope.Name;
                customer.Country = $scope.Country;
                $scope.Customers.push(customer);
 
                //Clear the TextBoxes.
                $scope.Name = "";
                $scope.Country = "";
            };
 
            $scope.Remove = function (index) {
                //Find the record using Index from Array.
                var name = $scope.Customers[index].Name;
                if ($window.confirm("Do you want to delete: " + name)) {
                    //Remove the item from Array using Index.
                    $scope.Customers.splice(index, 1);
                }
            }
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th>Name</th>
                <th>Country</th>
                <th></th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td><input type="text" value="{{m.Name}}" /></td>
                    <td><input type="text" value="{{m.Country}}" /></td>
                    <td><input type="button" ng-click="Remove($index)" value="Remove" /></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td><input type="text" ng-model="Name" /></td>
                    <td><input type="text" ng-model="Country" /></td>
                    <td><input type="button" ng-click="Add()" value="Add" /></td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
</html>
 
 
Screenshot
Dynamically Add / Remove HTML Input (Form) fields using AngularJS
 
 
Browser Compatibility
The above code has been tested in the following browsers only in versions that support HTML5.
Internet Explorer  FireFox  Chrome  Safari  Opera 
* All browser logos displayed above are property of their respective owners.
 
 
Demo
View Demo
 
 
Downloads
Download Code