角材料设计有效/无效输入

Question

Couldn't seem to find a relative existing answer so..

I am using angular material design and i'm creating a sign in/up form. At the moment when no text is entered into the field the label and bottom border turns red; this is the result of ng-required="true" .

I would also like it to turn green when the information is valid, I am not amazingly familiar with angular so not sure if there is another directive I could use?

Alternatively I assume some CSS would do the trick; In one of my CSS files there is -

.ng-invalid.ng-dirty {
    border-color: #FA787E; (red)

}
.ng-valid.ng-dirty {
    border-color: #78FA89; (green)

}

These would be perfect but attached attaching the class does not seem to work (or im doing it wrong)

Here is the code from one 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 anyone could assist that would be great, thanks in advance

Answer 1

You are on the right track with the css just missing the .md-input like this

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

jsfiddle
alternately you can use !important with you current css border-color like this border-color: #FA787E !important;

Answer 2

 <md-input-container>

   <label class='userlabel'>Username</label>

   <input ng-model='credentials.username' type='text' aria-label="password" class="inputtext" required>

 </md-input-container>

I took out the ng-required, and placed required in the input tag. So, by default, this input tag will make as ng-invalid. Let me know if this works.