Mdd Mdd - 2 months ago 24
AngularJS Question

How to enable a button using angulars ngForm when an item is removed from an array

I have a form using AngularJS ngForm directive. This form shows a list of items in an array, and clicking on any item removes it from the array. The button is disabled by default and should be enabled if an item is removed from an array.

Is there a way to have ngForm track changes to an array and set the

state so that the button will toggle between disabled and enabled?

Here is a plnkr that I created demonstrating my use of ngForm and a list. Clicking on an item in the list removes the item from the list, but does not enable the button.

Here is my example code.


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

app.controller('MyController', [function() {
var vm = this; = [1, 2, 3];

vm.removeItem = function(i) {
var index =;, 1);



<body ng-app="myApp">
<div ng-controller="MyController as vm">
<div ng-form="form">
<li ng-repeat="i in" ng-click="vm.removeItem(i)">
Click to remove item - {{i}}

<button type="button" ng-disabled="form.$pristine">


$pristine is about user interaction with form controls. Your UI not offering user traditional interactions but instead modify bound data. That's why $pristine is not changes in such interactions. So you can either call $scope.form.$setDirty() in your method, or set some flag and use it for ng-disabled, or use your array length check instead of that flag:

ng-disabled=" == 3"