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

enter image description here

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

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -