javascript - 在 AngularJS 中，如何在输入有效数据后在输入字段前显示绿色勾号？

Question

我在我的网络应用程序中使用 AngularJS 和 Angular Material。

我是 AngularJS 和 Angular Material 的新手。

现在，只有在输入有效输入数据时，我才必须在输入字段前面显示一个绿色勾号。

我该如何实现？

密码字段代码示例如下:

<md-input-container class="md-block" flex> 
    <label>Current Password</label> 
    <md-icon md-svg-src="/images/icons/ic_lock_black_24px.svg"></md-icon>
    <input type="password" ng-model="changePassword.currentPassword" required name="curPass" minlength="6">
    <div ng-messages="chnagePasswordForm.curPass.$error">
        <div ng-message="required">Please enter valid password</div>
        <div ng-message="minlength">Password should be of eight or more characters</div>
    </div>
    <md-button ng-disabled="chnagePasswordForm.$invalid" class="md-raised md-primary enrolBtn" ng-click="changePassword()">Save</md-button>
</md-input-container>

只有在输入有效密码后，我才必须在此密码字段前显示绿色勾号。

谢谢。

Answer 1

到目前为止你尝试了什么？您是否尝试过添加另一个图标并使用 ng-if 有条件地显示它:

 <md-icon md-svg-src="/images/icons/ic_lock_black_24px.svg"></md-icon>
 <md-icon md-svg-src="/images/icons/my_checkmark.svg" ng-if="!changePassword.curPass.$error"></md-icon>
 <input type="password" ng-model="changePassword.currentPassword" required name="curPass" minlength="6">