在 AngularJS 中，如何在输入字段中输入有效数据时在输入字段前面显示绿色刻度线

In AngularJS how to display a green tick mark in front of input field upon entering valid data in it?

本文关键字：输入 字段 显示 前面 有效数 AngularJS 数据 有效      更新时间：2023-09-26

我在我的Web应用程序中使用了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>

只有在输入有效密码后，我才必须在此密码字段前面显示绿色刻度线。

谢谢。

到目前为止，你试过什么？您是否尝试仅添加另一个图标并有条件地使用 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">
相关文章：