angularjs - Apply CSS to button when form is invalid -
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: .1s linear; -moz-transition: .1s linear; transition: .1s linear; }
button image
i using angularjs here (everybody knows :-)). here want disable save button when form not valid, can able want apply other css greying down button etc when form has validation errors.
i tried ng-class below
ng-class="{btn-disable: !filter.$valid }"
but didn't applied, can me on this?
thanks
try changing
ng-class="{btn-disable: !filter.$valid }"
to
ng-class="{'btn-disable': !filter.$valid }"
notice single quotes.
check out this fiddle difference (and sure @ error in js console!)
Comments
Post a Comment