ng-messages 的$dirty 使用

87 阅读 0 评论 58 点赞

我是靠谱客的博主粗心战斗机，这篇文章主要介绍ng-messages 的$dirty 使用，现在分享给大家，希望可以做个参考。

用 ng-show 来显示错误信息的时候需要写很多的代码，找了一个插件 ng-messages。使用方法下：

js 代码中加入依赖

复制代码

1
2
3
4
5
6
var myApp = angular.module('myApp', [
    "restangular",
    'ui.router',
    'ngMessages',
    ...

html 中添加 js 文件

复制代码

1
<script src="bower_components/angular-messages/angular-messages.js"></script>

下面是一个注册页面的示例

复制代码

<div class="container" ng-controller="registerController">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
            <div class="panel-heading">
            </div>
                <div class="panel-body">
                    <div role="form" class="form-horizontal">
                        <form name="register_form" novalidate >
                            <div class="form-group">
                                <lable class="col-sm-2 control-label">Email:</lable>
                                <div class="col-sm-10">
                                    <input class="form-control"
                                    ng-model="userinfo.email"
                                    placeholder="请输入电子邮箱作为用户名" name="email" type="email" autofocus required minlength="6"  ng-maxlength="20"/ >
                                </div>
                            </div>

<div class="form-group">
                                <lable class="col-sm-2 control-label">Password:</lable>
                                <div class="col-sm-10">
                                  <input class="form-control"
                                  ng-model="userinfo.password"
                                  placeholder="请输入密码" name="password" type="password" required ng-minlength="6" ng-maxlength="20"/>
                                </div>
                            </div>

<button class="btn btn-success col-sm-offset-2" ng-disabled="register-form.$invalid">注册</button>
                        </form>
                    </div>
                </div>

<div class="panel-footer">
                    <div class="alert alert-error">
                        {{userinfo | json}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<div class="container" ng-controller="registerController">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
            <div class="panel-heading">
            </div>
                <div class="panel-body">
                    <div role="form" class="form-horizontal">
                        <form name="register_form" novalidate >
                            <div class="form-group">
                                <lable class="col-sm-2 control-label">Email:</lable>
                                <div class="col-sm-10">
                                    <input class="form-control"
                                    ng-model="userinfo.email"
                                    placeholder="请输入电子邮箱作为用户名" name="email" type="email" autofocus required minlength="6"  ng-maxlength="20"/ >
                                </div>
                            </div>

                            <div ng-messages="register_form.email.$error" ng-if="register_form.email.$dirty" ng-messages-multiple ng-messages-include="pages/error.html">
                            </div>


                            <div class="form-group">
                                <lable class="col-sm-2 control-label">Password:</lable>
                                <div class="col-sm-10">
                                  <input class="form-control"
                                  ng-model="userinfo.password"
                                  placeholder="请输入密码" name="password" type="password" required ng-minlength="6" ng-maxlength="20"/>
                                </div>
                            </div>

                            <div ng-messages="register_form.password.$error" ng-if="register_form.password.$dirty" ng-messages-multiple ng-messages-include="pages/error.html">
                            </div>

                            <div class="form-group">
                                <lable class="col-sm-2 control-label"></lable>
                                <div class="col-sm-10">
                                  <input class="form-control" placeholder="请再次输入密码" name="password-again" type="password"  required ng-minlength="6" ng-maxlength="20"/>
                                </div>
                            </div>

                            <div ng-messages="register_form.password-again.$error" ng-if="register_form.password-again.$dirty" ng-messages-multiple ng-messages-include="pages/error.html">
                            </div>

                            <!-- <lable class="col-sm-2 control-label"></lable> -->
                            <button class="btn btn-success col-sm-offset-2" ng-disabled="register-form.$invalid">注册</button>
                        </form>
                    </div>
                </div>

                <div class="panel-footer">
                    <div class="alert alert-error">
                        {{userinfo | json}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

error.html

复制代码

1
2
3
4
5

<div class="col-sm-offset-2"><p class="text-danger" ng-message="required">* 此项为必填项</p></div>
<div class="col-sm-offset-2"><p class="text-danger" ng-message="minlength">* 最小6个字符 </p></div>
<div class="col-sm-offset-2"><p class="text-danger" ng-message="maxlength">* 最大20个字符 </p></div>
<div class="col-sm-offset-2"><p class="text-danger" ng-message="email">* 请输入 email 地址</p></div>