Having trouble finding an answer that fits my situation...
Currently, I am using angular material design to create a sign in/up form. When no text is entered into the field, the label and bottom border turn red due to the use of ng-required="true".
I want the label and bottom border to turn green when the information is valid, but I'm not sure if there is another directive in Angular that could achieve this. Any suggestions?
Alternatively, I have some CSS in one of my files:
.ng-invalid.ng-dirty {
border-color: #FA787E; (red)
}
.ng-valid.ng-dirty {
border-color: #78FA89; (green)
}
However, attaching the class does not seem to be working for me. Here's an example of code for 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 has any insights or solutions, I would greatly appreciate it. Thanks in advance!