javascript - Angular material design valid/invalid input -

couldn't seem find relative existing answer so..

i using angular material design , i'm creating sign in/up form. @ moment when no text entered field label , bottom border turns red; result of ng-required="true".

i turn green when information valid, not amazingly familiar angular not sure if there directive use?

alternatively assume css trick; in 1 of css files there -

.ng-invalid.ng-dirty {     border-color: #fa787e; (red)  } .ng-valid.ng-dirty {     border-color: #78fa89; (green)  } 

these perfect attached attaching class not seem work (or im doing wrong)

here code 1 line of input

<md-input-container>      <label class="userlabel">username</label>      <input ng-model="credentials.username" type="text" ng-required="true" aria-label="password" class="inputtext ng-valid">  </md-input-container> 

if assist great, in advance

you on right track css missing .md-input this

.md-input.ng-invalid.ng-dirty {     border-color: #fa787e; } .md-input.ng-valid.ng-dirty {     border-color: #78fa89; } 

jsfiddle
alternately can use !important current css border-color border-color: #fa787e !important;