dynamically added elements are not removing from the form in angular JS

Question

I am trying to remove an input element which was added dynamically into a form.

I am using the below code for this.

 var MyEle =  angular.element(document.getElementById('testID'));
  MyEle.remove();

and the input element is added dynamically as below

<ng-form name="TestForm" novalidate">
 <div class="testData">
    <input type="text" name="FirstName1" ng-model="FirstName1" ng-required="true"/>
    <input type="text" id="testID" name="FirstName2" ng-model="FirstName2" ng-required="true"/>
  </div>
</ng-form>

The above code is removing the element but still the form is showing invalid even after entering the data into First Input(FirstName1) element.

It seems the removal process is not yet completed. It is not removing from the form. but I am not able to see it on the page.

I don't know what you are trying to do here, but angular was not designed to work like this... You should keep the state of the element in the controller and handle it's visibility on the view with ng-if of ng-hide — Loupax
– Loupax, Commented Jan 18, 2016 at 14:24

zamarrowski · Accepted Answer · 2016-01-18 14:25:06Z

1

Use ng-if, avoid manipulate the DOM in Controller.

answered Jan 18, 2016 at 14:25

zamarrowski

4832 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ssilas777 · Accepted Answer · 2016-01-18 14:32:45Z

0

In order to remove validation errors you should remove the element and compile again the form, your code should bes some thing like this, you should also inject $compile to your controller

 var MyEle =  angular.element(document.getElementById('testID'));
 MyEle.remove();
 var parentElement = document.getElementsByClassName("testData");
 $compile($(parentElement)($scope);

answered Jan 18, 2016 at 14:32

ssilas777

9,7704 gold badges48 silver badges70 bronze badges

Comments

Vanojx1 · Accepted Answer · 2016-01-18 14:49:39Z

I can suggest you a more Angular approach to make a dynamic form, check the snippet

// the main (app) module
var myApp = angular.module("myApp", []);

// add a controller
myApp.controller("myCtrl", function($scope) {
  $scope.form = [{
    name: "FirstName1",
    required: true,
    type: "text",
    value: "billy"
  }, {
    name: "FirstName2",
    required: true,
    type: "text",
    value: "bolly"
  }];

  $scope.remove = function() {
    $scope.form.pop();
  };

  $scope.add = function() {
    $scope.form.push({
      name: "new_input_"+$scope.form.length,
      required: true,
      type: "text",
      value: "bolly_"+$scope.form.length
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
  <input type="{{input.type}}" ng-repeat="input in form" name="{{input.name}}" ng-model="input.value" ng-required="input.required" />
  <button ng-click="add()">add</button>
  <button ng-click="remove()">remove</button>
</body>

Collectives™ on Stack Overflow

dynamically added elements are not removing from the form in angular JS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related