I want to use mouseover when the button is disabled. In the below code mouseover will work if ng-disabled="false" but it won't work if ng-disabled="true".
<body ng-app="ngAnimate">
<button ng-disabled="true" ng-mouseover="show=true" ng-mouseleave="show = false">
Mouseover
</button>
<div>
Show:
<span class="test" ng-show="show">
I show up when your mouse enter on button
</span>
</div>
</body>
I want to use mouseover when the button is disabled. In the below code mouseover will work if ng-disabled="false" but it won't work if ng-disabled="true".
<body ng-app="ngAnimate">
<button ng-disabled="true" ng-mouseover="show=true" ng-mouseleave="show = false">
Mouseover
</button>
<div>
Show:
<span class="test" ng-show="show">
I show up when your mouse enter on button
</span>
</div>
</body>
2 Answers
Reset to default 12It's not possbile. Actually it has nothing to do with Angular. It's expected behaviour when browsers are not supposed to fire onmouseover, onclick, etc. events on disabled form controls. So you can't do it directly.
Can't do it directly - meaning, that you can bind mouseover even to wrapping container which would not have this limitation. Then you would need to control action and proceed only if disabled flag is true or false if you need.
That being said, you should probably not try to workaround this behaviour. Form UX perspective disabled control should not be interaction-able, after all that's what disabled means.
I recently faced a similar problem where i disable a submit button on a form unless the form is valid. When the user hover over the disabled button, I wanted all required fields to get a different color.
I solved this using a html structure like this:
<div ng-class="{error: showError}">
<div disabled-wrapper ng-mouseenter="checkValid()" ng-mouseleave="showError = false">
<div><button ng-disabled="!valid">Next</button></div>
</div>
</div>
And css like this:
[disabled-wrapper] {
position: relative;
z-index: 0;
}
[disabled-wrapper] [disabled] {
position: relative;
z-index: -1;
}
And controller function:
$scope.checkValid = function() {
$scope.showError = !$scope.valid;
}
// I have more logic regarding validity of form.
// I am not sure why the div within the wrapper is needed (but it is).
// The positioning and z-index of the wrapper prevents any parent element with back-ground color from overshadowing the disabled button.