Dynamically Generating Form Elements Using Angularjs

While creating a UI for the web apps, we come up with the situation where we want to get the same type of information from the user. In some situation, we have no idea about the number of that particular type of information the user wanted to provide.

In this situation, we come with the solution to dynamically add the field or group of fields based on the user interaction with the form element. For e.g.: user's phone number- User will decide the number of phones it wishes to enter into the form.

The idea is simple. We will provide the user a way to add the number of fields it requires. There is also a possibility when the user wishes to remove the previously added fields.

To implement the dynamic fields addition, we will use ng-repeat directive to render the fields or group of fields. This ng-repeat directive is to be defined on the div element which wraps the markup for the fields which is to be dynamically added. Let jumps into the code. For the awesome look we will use twitter bootstrap and for the sake of simplicity, we will not implement the validation and submission of the form.

HTML Code:

<form class="form-horizontal" name="personForm">
   <div class="form-group">
     <label for="person_name" class="col-sm-2 control-label">Name:</label>
     <div class="col-sm-7">
       <input type="text" id="person_name" class="form-control" name="person_name" ng-model="person.person_name">
     </div>
   </div>
   <div ng-repeat="o in person.phone">
     <div class="form-group">
       <label for="phone_type" class="col-sm-2 control-label">Phone {{$index+1}}:</label>
       <div class="col-sm-2">
         <select ng-model="o.phone_type" name="phone_type" class="form-control" id="select1" ng-options="t for t in phone_type">
         </select>
       </div>
       <div class="col-sm-5">
         <input ng-model="o.phone_number" type="text" class="form-control" ng-model="o.phone_number">
       </div>
       <div class="col-sm-2">
         <button class="btn btn-danger btn-sm" ng-click="removeFields($index, person.phone)" 
             ng-if="person.phone.length !== 1">-</button>
         <button class="btn btn-primary btn-sm" ng-click="addFields($index, person.phone)">+</button>
       </div>
   </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="reset" class="btn btn-default">Reset</button>
      <button type="submit" class="btn btn-primary">Save</button>
    </div>
  </div>
</form>

Javascript Code:

var app = angular.module('myApp',[]);
app.controller('myAppCtrl',['$scope',function($scope){
 $scope.phone_type = ['Home', 'Office', 'Fax', 'Other'];
 $scope.person = {};
 $scope.person.phone = [ {} ];

 $scope.addFields = function(index, arr){
  arr.splice( index+1, 0, {} );
 };

 $scope.removeFields = function(index,arr){
  arr.splice( index, 1 );
 };
}]);

As you can see that we have created a form which takes the name and multiple phone numbers and its type from the user. The markup the for the elements which is to be multiplied is wrapped into the div having ng-repeat directive. The plus (+) and minus (-) buttons are to be used to add and remove the fields respectively.

As you can see the javascript code on line number 5 where we initialized an array having an empty object so that it can be used by ng-repeat, to generate at least one field for the phone number.

When the user adds or remove the field by clicking plus or minus buttons respectively, ng-click directive will call the addFields() and removeFields() passing where (i.e. $scope.phone) and which (i.e. index) position the new data will be added or removed.

Lastly, we have used ng-if directive to show or hide the minus (-) button based on the condition so that the $scope.phones array must have at least one element. The minus button will not show if $scope.phones has only one element.

Working Examples: