Check Demo Check full code

Introduction

Sometimes I used AngularJS on simple and small project as an elegant way to manipulate DOM elements. One area where I use angularjs as utility is when adding additional inputs in the form. For example you display an input field where a user can type his contact number and you also want to give him an option of adding his other contact numbers.

Problem

You want a button in the form to add additional input when clicked and an option to remove the new input.

Solution

The idea is to have a fake data/model in the controller. Then we will use that data to populate a set of input field and a remove button in the form using ng-repeat. We will create a function that will add a new item in the model and call it using ng-click which was attached in the add button. There’s also a function to remove an item in the model. This remove function will accept one parameter which is the $index of the item generated by the ng-repeat and it will be triggered on click. This parameter allows the remove function to know which item in the model are we deleting.

So let’s start.

1. Create a form with one input and a submit button

<form>
    <div class="wrapper">
        <button href="#" id="addField">Add One Field</button>
        <p>
            <input type="text" class="form-control" name="contact[]" />
            <button href="#" class="removeField">Remove</button>
        </p>
        <p><input type="submit" value="Submit" /></p>
    </div>
</form>

This is a very simple form consists of:

  • the form element
  • an outer <div> to wrap our form elements
  • an <button> tag where we will bind the “addContactField” function
  • input field wrapped in a <p> tag.
  • an <button> to remove the input field
  • a submit button

2. Include AngularJS and setup the form for Angular Magic

Include angularjs in your page.

<script type="text/javascript" src="/js/angular.js"></script>

Initializes AngularJS by adding ng-app="contactsApp" in wrapper div.

<form ng-app="contactsApp">

Next create a controller called CreateContactCtrl and declare it in the wrapper div.

<div class="wrapper" ng-controller="CreateContactCtrl">

3. Create the AngularJS script and initialize AngularJS

<script type="text/javascript">
    var app = angular.module('contactsApp', []);
    app.controller('CreateContactCtrl', function($scope) {
        $scope.contacts = [{type: 'text'}];

        $scope.addContactField = function(){
            $scope.contacts.push({type: 'text'});  
        };

        $scope.removeContactField = function(index){ 
            $scope.contacts.splice( index, 1 );
        };
    }); 
</script>
  • First we created a script tag.
  • Then we bootstrapped our AngularJS application by passing the ng-app value declared in the form element
  • We add a CreateContactCtrl controller to our application
  • Inside our controller scope, we created 2 methods and 1 property:
    • $scope.contacts - this is our fake data. The length of this array will determine the number of displayed input fields in our form
    • $scope.addContactField - this function will add an item to $scope.contacts
    • $scope.removeContactField - this will remove an item on $scope.contacts

4. Bind the functions to the form

Let’s use $scope.contacts to control the display of input tags. We will use AngularJS directive called ng-repeat in the <p> tag that wraps the input field.

<p ng-repeat="contact in contacts">
    <input type="text" class="form-control" name="contact[]" />
    <a href="#" class="removeField">Remove</a>
</p>

By default there is 1 item in our $scope.contacts because we want to display one set of input field and remove button. You might be wondering about this {type: 'text'} inside the $scope.contacts, this is just a fake property and it could be something else. The idea is we need to have something inside $scope.contacts. You can also leave it as an empty object if you don’t want to display any input field by default.

Now it’s time to bind addContactField and removeContactField to their respective elements (#addField and .removeField) using an AngularJS directive called ng-click.

<a href="#" id="addField" ng-click="addContactField()">Add One Field</a>

<a href="#" class="removeField" ng-click="removeContactField($index)">Remove</a>

The $index passed in removeContactField($index) is an index generated by ng-repeat while looping. We will pass the index so $scope.removeContactField() knows what item in the $scope.contacts to remove.

Done!

The Full Code

<form ng-app="contactsApp">  
    <div class="wrapper" ng-controller="CreateContactCtrl">
        <a href="#" id="addField" ng-click="addContactField()">Add One Field</a>
        <p ng-repeat="contact in contacts">
            <input type="text" class="form-control" name="contact[]" />
            <a href="#" class="removeField" ng-click="removeContactField($index)">Remove</a>
        </p>
        <p><input type="submit" value="Submit" /></p>
    </div>
</form>

<script type="text/javascript" src="/js/angular.js"></script>

<script type="text/javascript">
    var app = angular.module("contactsApp", []);
    app.controller("CreateContactCtrl", function($scope) {
        $scope.contacts = [{type: "text"}];

        $scope.addContactField = function(){
            $scope.contacts.push({type: "text"});  
        };

        $scope.removeContactField = function(index){ 
            $scope.contacts.splice( index, 1 );
        };
    }); 
</script>

Check Demo Check full code