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

Question

似乎找不到相对现有的答案，所以..

我正在使用 Angular Material Design 并且正在创建一个登录/注册表单。在字段中没有输入文本时，标签和底部边框变为红色；这是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.ng-invalid.ng-dirty {
    border-color: #FA787E;
}
.md-input.ng-valid.ng-dirty {
    border-color: #78FA89;
}

jsfiddle
或者，您可以使用 !important 与您当前的 css border-color 像这样 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-required 拿出来，放在 input 标签里。因此，默认情况下，此输入标签将设为 ng-invalid。让我知道这是否有效。