Bug ngAnimate 1.2.0-rc2 with side effects on watches on form$invalid when combined with ng-if in some inputs #4226
Description
I am wathcing a strange behavior when including ngAnimate as dependency.
I have a button with ng-disabled="$form.invalid" which is not being updated on some user events made on the form.
Here is an example ro reroduce the bug
<!DOCTYPE html>
<html ng-app="app">
<head></head>
<body ng-controller="MainCtrl">
<form name="myForm" novalidate>
<p>
<label>Required Input </label>
<input type="text" name="mytext" ng-model="vm.mytext" required/>
</p>
<p>
Option 1 <input type="checkbox" name="option1" ng-model="vm.option1"/>
Option 2<input type="checkbox" name="option2" ng-model="vm.option2"/>
</p>
<div>
<p>Fill Fields</p>
<div ng-if="vm.option1">Fields for Option 1
Required
<textarea name="myField1" required ng-model="vm.myField1"></textarea>
</div>
<div ng-if="vm.option2">Fields for Option 2
Required
<textarea name="myField2" required ng-model="vm.myField2"></textarea>
</div>
</div>
<hr/>
<button ng-disabled="myForm.$invalid" ng-click="submit()">Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.min.js"></script>
<script>
(function () {
"use strict";
var app = angular.module('app', ['ngAnimate']); //WITH ngAnimate as dependency, the button ng-disabled does not respond to checkbox changes
//var app = angular.module('app', []); //Comment the previous line and uncomment this to have this sample working as expected
app.controller('MainCtrl', ['$scope',
function ($scope) {
$scope.vm = {}
$scope.submit = function() {
console.log('submitted');
};
}
]);
})();
</script>
</body>
</html>Here the steps to reproduce the bug:
1 - fill some text in text box 'Required Input' (the button becomes enabled)
2 - check Option 1 (the button becomes disabled)
3 - fill textarea of Option 1 (the button becomes enabled)
4 - check Option 2 (the button becomes disabled)
5 - uncheck Option 2 the button remains disabled, which is not correct
Now, if we do not include ngAnimate as dependency
1 - fill some text in text box 'Required Input' (the button becomes enabled)
2 - check Option 1 (the button becomes disabled)
3 - fill textarea of Option 1 (the button becomes enabled)
4 - check Option 2 (the button becomes disabled)
5 - uncheck Option 2 the button becomes enabled which is correct
Here is a jsfiddle http://jsfiddle.net/bfcamara/8s6r2/