HTML
<div class="filterButt">
<input type="hidden" name="reportParams">
<span class="pull-right">
<button type="submit" ng-disabled="!filter.$valid" ng-click='filterComponents()' data-toggle="modal" id="filterClose" class="btn-flat default" href="#myModal1"><i class="icon-ok-sign">Save</i></button>
</span>
</div><!--#filterButt-->
CSS
.btn-flat {
display: inline-block;
margin: 0;
line-height: 15px;
vertical-align: middle;
font-size: 12px;
text-shadow: none;
box-shadow: none;
background-image: none;
border: 0 none;
color: #fff;
font-weight: 500;
border-radius: 4px;
background: #2b73b0;
border: 1px solid #3883c0;
cursor: pointer;
padding: 7px 14px;
-webkit-transition: all .1s linear;
-moz-transition: all .1s linear;
transition: all .1s linear;
}
Button Image
In this implementation with AngularJS, the goal is to disable the save button when the form is invalid. This can be achieved easily, but there is also a desire to style the button differently, such as graying it out, when validation errors occur.
An attempt was made using ng-class like so:
ng-class="{btn-disable: !filter.$valid }"
Unfortunately, this approach did not have the desired effect. Any suggestions or assistance on how to achieve this would be greatly appreciated!
Thank you.