Cloning form and clone Fields in respective form in angularjs

Question

I have a form which has some fields and 2 buttons one of which is to clone the complete form and other is intended to clone only form fields. I tried with ng-repeat but when I cloned the form then trying to clone fields in original form then it clones the fields in the cloned form also. How to restrict cloning in the duplicate form. This is my HTML

    <!DOCTYPE html>
    <html>
      <head>
    <script data-require="[email protected]" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="MyController">
      <div ng-repeat="form in forms">
        <hr />
        <form name="myForm" ng-init="name = form.name">
          <br>

          <div ng-repeat="user in users">
          <input type="text" ng-model="user.name"/>
            <input type="text" ng-model="user.phone"/>
          </div><br>
          <button type="button" href="" ng-click="addUser()">Add user</button>
        </form>
      </div>
      <hr />
      <input type="button" value="Create form" ng-click="createForm()" />
    </div>
  </body>    
</html>

and here is my `script.js

    angular.module("myApp", []).controller('MyController',
    ['$scope', function($scope){
    $scope.forms = [{name: "form1"}];
    $scope.createForm = function(){
        $scope.forms.push({name: "form" + ($scope.forms.length + 1)});
    };
    $scope.saveForm = function(formScope){
        alert("Save called for " + formScope.name + ", myInputValue = " + formScope.myInputValue);            
    };
     $scope.users = [{name: 'John',phone: '098097770'},{name: 'Alice',phone: '765876598'}];
  $scope.addUser = function() {
    $scope.users.push({name: 'New user',phone: ''});
  };
  $scope.submit = function() {
    alert('Here are the users: ' + angular.toJson($scope.users));
  };
}]);

Plnkr Demo

what do you mean by clone a form vs cloning form fields only? Did not get it — Rahul Arora
– Rahul Arora, Commented Jun 29, 2017 at 11:59
@RahulArora please check the plnkr demo. the problem is after cloning the form, I want to add user only in the respective form, not in both the form. — Satish Patel
– Satish Patel, Commented Jun 29, 2017 at 12:21

Rahul Arora · Accepted Answer · 2017-06-29 14:01:34Z

Here is the working plnkr: plnkr

Basically, you need to link the user with the form object so that its unique for each form.

There will be some changes to ng-repeat (the nested one) and one function call for addUser where you need to pass the index of the form for which user needs to be added

$scope.forms = [
      {
        name: "form1",
        users: [
            {name: 'John',phone: '098097770'},
            {name: 'Alice',phone: '765876598'}
          ]
      }
    ];
    $scope.createForm = function(){
        $scope.forms.push({
          name: "form" + ($scope.forms.length + 1),
          users: [
            {name: 'John',phone: '098097770'},
            {name: 'Alice',phone: '765876598'}
          ]
        });
    };
    $scope.saveForm = function(formScope){
        alert("Save called for " + formScope.name + ", myInputValue = " + formScope.myInputValue);            
    };

  $scope.addUser = function(index) {
    $scope.forms[index].users.push({name: 'New user',phone: ''});
  };

Collectives™ on Stack Overflow

Cloning form and clone Fields in respective form in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related