角材料設計有效/無效輸入

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。 讓我知道這個是否奏效。