CODEWITHSUNDEEP
angularjsangular-formly
Masood Alam
Masood Alam

Reputation: 655

Angular-Formly : Adding Form fields dynamically on user click

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

Upvotes: 23

Views: 26468

Answers (3)

mbijou
mbijou

Reputation: 87

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

Upvotes: 0

Hadi
Hadi

Reputation: 17299

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>

Upvotes: 11

user3769694
user3769694

Reputation: 222

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

Upvotes: 16

Related Questions