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

Question

似乎找不到相对的现有答案。

我正在使用棱角材质设计，并且正在创建签到/签到表格。 在此字段中未输入任何文本时，标签和底部边框变为红色； 这是ng-required="true" 。

当信息有效时，我也希望它变绿。我对angular不太熟悉，因此不确定是否可以使用其他指令？

另外，我假设某些CSS可以解决问题。 在我的CSS文件之一中-

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

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

}

这些将是完美的，但是附加附加的类似乎不起作用（或者我做错了）

这是一行输入中的代码

<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>

如果有人可以帮助，那就太好了，在此先感谢

Answer 1

您正.md-input正确的轨道.md-input ，而CSS只是像这样缺少.md-input

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

jsfiddle
或者，您可以对当前的CSS border-color使用!important ，例如以下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>

我取出了ng必需的，并把它放在了输入标签中。 因此，默认情况下，此输入标签将变为ng-invalid。 让我知道这个是否奏效。