Question

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

我正在使用角度材料设计，我正在创建一个登录/升级表单。在没有文本输入字段时，标签和底部边框变为红色;这是ng-required="true"的结果。

我还希望它在信息有效时变为绿色，我对角度不是很熟悉，所以不确定是否还有其他指令我可以使用？

或者我假设一些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

你正走在正确的轨道上，css错过了.md-input这样的

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

jsfiddle
或者，您可以!important使用border-color当前的border-color: #FA787E !important; $table = $header->addTable('My Custom Style');

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，并在输入标签中放置了必需的。因此，默认情况下，此输入标记将作为ng-invalid。如果有效，请告诉我。

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

2 个答案: