Angular-Formly : Adding Form fields dynamically on user click

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

Have you seen this: http://angular-formly.com/#/example/advanced/repeating-section it might be helpful. — kentcdodds, Sep 09 '15 at 17:41
I am looking to create a basic, integrated form builder. I'm stuck in the middle with no way to add a new field and model. It seems I am missing something. fieldTransform seems it will do it, but it eludes me thus far: http://jsbin.com/kaluya/6/edit?js — deinerson1, Sep 12 '15 at 23:48
Do I push a new field object, or copy of one, and do the same with the model onto vm.fields and vm.model? Inside of fieldTransform? — deinerson1, Sep 12 '15 at 23:56
@kentcdodds, i looked at the repeat section example , and created a custom type to add input on clicking "Add" button. How can I access the parent controller from with in the custom type controller, as the logic to add the fields is in the parent controller. Here is a link to the github gh-pages http://masoodgit.github.io/ngJsonForms/app/ — Masood Alam, Sep 22 '15 at 16:20

score 16 · Accepted Answer · edited Apr 07 '16 at 15:45

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);
  };
});

Hadi J · Answer 2 · 2017-04-09T10:09:53.323

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>

Excellet answer and its working even when i delete one of the row in between. — SMA, Mar 01 '16 at 11:51

score 0 · Answer 3 · answered Dec 22 '17 at 05:45

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);
    };
    }
);

Angular-Formly : Adding Form fields dynamically on user click

3 Answers3

See this Plunker

Linked