Angular-Formly : Adding Form fields dynamically on user click

The question:

How would I go about adding the capability in the form so that the user can add more input fields by clicking the “Add”. This using the angular formly library.

Here is an example of the exact feature but done using only angularjs.

Adding form fields dynamically

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

See this Plunker

Here is an example of what you need. As you can see in the plunker, there is a TextArea which can be created dynamically on button click. The created TextAreas can also be removed with the remove button click.

See the HTML below

<div class="col-sm-10">
  <input type="button" class="btn btn-info" ng-click="addNewChoice()" value="ADD QUESTION">
  <div class="col-sm-4">
    <fieldset data-ng-repeat="field in choiceSet.choices track by $index">
      <textarea rows="4" cols="50" ng-model=" choiceSet.choices[$index]"></textarea>
      <button type="button" class="btn btn-default btn-sm" ng-click="removeChoice($index)">
        <span class="glyphicon glyphicon-minus"></span> REMOVE
      </button>
    </fieldset>
  </div>
</div>

and the JS will be as below

var app = angular.module('myApp', []);
app.controller('inspectionController', function($scope, $http) {
  $scope.choiceSet = {
    choices: []
  };
  $scope.quest = {};
  $scope.choiceSet.choices = [];
  $scope.addNewChoice = function() {
    $scope.choiceSet.choices.push('');
  };
  $scope.removeChoice = function(z) {
    $scope.choiceSet.choices.splice(z, 1);
  };
});

Method 2

I put simple example.

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

app.controller("MyCtrl" , function($scope){
  
   $scope.data ={
       names:[{ name:""}]
   };
  
  $scope.addRow = function(index){
    var name = {name:""};
       if($scope.data.names.length <= index+1){
            $scope.data.names.splice(index+1,0,name);
        }
    };
  
  $scope.deleteRow = function($event,name){
  var index = $scope.data.names.indexOf(name);
    if($event.which == 1)
       $scope.data.names.splice(index,1);
    }
  
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
   <table>
     <tr ng-repeat="name in data.names track by $index">
        <td> <input type="text" ng-model="data.names[$index].name"></td>
        <td> <input type="button" ng-click="addRow($index)" value="Add" ng-show="$last"></td>
        <td> <input type="button" ng-click="deleteRow($event,name)" value="Delete" ng-show="$index != 0"></td>
     </tr>
   </table> 
    <span>{{data|json}}</span>
</div>

Method 3

Simple example works also deleting in any order:

http://plnkr.co/edit/c0FbjBJkHtDYRKslz0iq?p=preview

or:

some html:

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="oneApp" ng-controller="ctrl">
    <button ng-click="addNewRow()">Add row</button>

    <table>
        <tr ng-repeat="row in tablerows track by $id(row)">
        <td ng-model="tablerows[$index]">
                <input>
            </td>
            <td>
                <button ng-click="removeRow($index)" type="button">
                  Delete
                </button>
            <td>
        </tr>
    </table>
  </body>
</html>

script.js:

var app = angular.module('oneApp', []);
app.controller('ctrl', function($scope){
    $scope.tablerows = [];

    $scope.addNewRow = function () {
        var row_id;
        var tablerows = $scope.tablerows;
        if(tablerows.length > 0){
            row_id = tablerows[tablerows.length-1];
            row_id = row_id +1;
        }else{
            row_id = 0;
        }
        $scope.tablerows.push(row_id);
    };

    $scope.removeRow = function (index) {
        $scope.tablerows.splice(index,1);
    };
    }
);


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment