Full Stack Solutions
adding dynamic form field angular

Adding Form Fields Dynamically With – Angular JS

Dynamic Addition Field or any Fieldset control is awesome and also user-friendly.While building the Web Application and CRM that contain some Data Entry Fields so it sometimes required to add many field for additional Information or sometimes you want to create Array for the multiple forms.

So in this capability makes the more dynamic forms so that user can actually add/remove field by pressing Add/Remove button without programmer’s support.

Here is the code for making dynamic forms with adding/removing field from it.

index.html

 <form name="{{form.name}}"
          ng-repeat="form in forms">
          
      <h2>{{form.name}}</h2>
      <div ng-repeat="cont in form.contacts">
              <input type="text" class="xdTextBox" ng-model="cont.ac"/>
              <input type="text" class="xdTextBox" ng-model="cont.cat"/>
              <input type="text" class="xdTextBox" ng-model="cont.loc"/>
              
      </div>
      <button ng-click="addForm()">Add Form </button>
      <button ng-click="addFields(form)">Add</button>
      <hr>
    </form>

app.js

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

app.controller('MainCtrl', function($scope) {
    
    $scope.forms = [{
      name: "form1",
      contacts:[{ ac: '', auth: '', autname: ''}]
    },{
      name: "form2",
      contacts:[{ ac: '', auth: '', autname: ''}]
    },{
      name: "form3",
      contacts:[{ ac: '', auth: '', autname: ''}]
    }];
    
    $scope.addFields = function (form) {        
        form.contacts.push({ ac: '', auth: '', autname: '' });
    }
    
    $scope.addForm=function(){
      $scope.forms.push( {name: "form3",contacts:[{ ac: '', auth: '', autname: ''}]});
    }
    
    $scope.submit = function(form){
      console.log(form.contacts);
    }
});

DEMO

Plunker

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.

Most popular