Well, instead of making hacks the most clean solution would be to make the button enabled and just handle the submit using simple directive:
angular.module('common', []).directive('preventSubmit', function () {
return {
restrict: 'A',
scope: {
preventSubmit: '='
},
link: function (scope, element) {
element.bind('submit', function(e) {
if (scope.preventSubmit) {
e.preventDefault();
}
});
}
}
});
So what it does it binds to the submit event and if the form is invalid it prevents the form from submitting. If you don't use action attribute Angular handles it automatically and you can handle this but in case of specified action and normal submit this directive can be very useful.
And in the markup:
<form name="formuser" action='/signup' method='post'
novalidate prevent-submit="formuser.$invalid">
...
<button type="submit" ng-click="hasSubmitted=true">Submit</button>
</form>
And using ng-style or ng-class you can style your button as expected depending on your form state.