【怎么使得ng-message的表单认证一次只提醒一个 _angular基础】

怎么使得ng-message的表单认证一次只提醒一个

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

angular基础

详细描述

截图

代码

 <input class="enter"
                   type="text"
                   name="user"
                   id="username"
                   placeholder="请输入账号"
                   ng-model="userName"
                   required
                   ng-minlength="5"
                   ng-maxlength="10">
            <div ng-messages="myForm.user.$error" ng-if="myForm.user.$dirty" style="color: red">
                <div ng-message="required">用户名不能为空</div>
                <div ng-message="minlength">用户名长度要大于5</div>
                <div ng-message="maxlength">用户名长度不能超过10</div>
            </div>

            <div class="pwd-icon"></div>
            <input class="enter"
                   type="password"
                   name="password"
                   id="password"
                   placeholder="请输入密码"
                   ng-model="passWord"
                   required
                   ng-minlength="6"
                   ng-maxlength="10">
            <div ng-messages="myForm.password.$error" ng-if="myForm.password.$dirty" style="color: red">
                <div ng-message="required">密码不能为空</div>
                <div ng-message="minlength">密码长度不能小于6</div>
                <div ng-message="maxlength">密码长度不能超过10</div>
            </div>
        </div>
        <div id="tip" ng-model="logMsg">{{logMsg}}</div>
        <button type="button" id="loginBtn" class="login-btn" ng-click="login()">登录</button>

编辑于2024-11-23

时间排序

热门排序

[深圳|结业弟子]JS-韩鹏
0

关于样式崩塌，你可以把图标作为背景图片赋给输入框，或者将图标和输入框放到一个div里，这样就算移动也是一起移动的。
也可以把提示的位置给空出来，该出现的时候展示出来，也就不会影响到下面的结构。
只显示一个的方法倒是没有想到比较好的，不过可以结合 ng-blur ng-focus等来优化体验。
提醒一段时间关掉，直接用定时器将显示的值清空掉就行了。（不过ng-message好像不行，可以试试其他方法，我是把响应到的信息渲染到视图中的，然后定时器清空掉，之后可以接着进行渲染。ng-message的话直接清掉，html中的内容也就清掉了。）
反正你的主要问题就是样式会崩掉，稍微改下样式也就解决了。以上思路也可以参考一下。

查看全部>

编辑于2018-10-05

去第页