angular 表单验证之ngMessages

之所以要写这篇文章，是因为要纠正《Angular 权威教程 》这本书中的关于ngMessage中的写法错误。对于ngMessages这个插件的用法其实还是比较容易的。但比较坑爹的是学习这块最开始的参照教程就是这本书，它里面的写法又是错误的。百度查找了一些国人写的文章，要么没有写到那个部分，要么也是照抄而来。谷歌不了，用bing搜了一下，老外的文章。答案有了。就是我这篇文章中要写的重点。

对了，本篇文章的中的重点是讲述ngMessages中自定义错误指令信息的部分。我们先看《权威教程》这本书的写法：

app.directive('ensureUnique', function ($http) {

    return {

        require: 'ngModel',

        link: function (scope, element, attrs,
ctrl) //错误之处：ctrl应该修改为ngModel,对于我等新手又怎会明白呢

        {

                var url = attrs.ensureUnique;
        ctrl.$parsers.push(function(val) {
//同样的错误：ctrl应该修改为ngModel
        if (!val || val.length === 0) {
           return;
        }
        ngModel.$setValidity('checkingAvailability', true);
        ngModel.$setValidity('usernameAvailablity', false);
        $http({
              method: 'GET',
              url: url,
              params: {
              username: val
              }
           }).success(function() {
          ngModel.$setValidity('checkingAvailability', false);
          ngModel.$setValidity('usernameAvailablity', true);

         })['catch'](function() {
         ngModel.$setValidity('checkingAvailability', false);
         ngModel.$setValidity('usernameAvailablity', false);
       });
        return val;
        }

    };

})

这是脚本语言之中的错误，我们再看看html里面的错误。

<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController"
ensure-unique="/api/checkUsername.json"> //这里为错误，这个指令用在了表单标签里面，应该用在对应的input元素里面
<label>
Your name
</label>
<input type="text" placeholder="Username" name="username" ng-model="signup.username"
ng-minlength=3 ng-maxlength=20 required
ensure-unique="/api/checkUsername.json" />//应该用在这里才对。坑爹吧
<div class="error" ng-messages="signup_form.username.$error">
<div ng-message="required">
Make sure you enter your username
</div>
<div ng-message="checkingAvailability">
Checking...
</div>
<div ng-message="usernameAvailablity">
The username has already been taken. Please choose another
</div>
</div>
<button type="submit">
Submit
</button>
</form>

还好我在学习的过程中一根筋，不解决绝不放过。查了很多资料之后，终于找到了正确的版本。下面是根据我自己的需求改写后代码：

.directive('ensureUserUnique', function (accountService) {

    return {

        require: '^ngModel',

        link: function (scope, element, attrs, ngModel)

        {

            var setAsChecking = function (bool) {

                ngModel.$setValidity('checkingAvailability', !bool);

            };

            var setAsUserName = function (bool) {

                ngModel.$setValidity('usernameAvailability',bool);

            };

            ngModel.$parsers.push(function (val) {

                if (!val || val.length <= 5)

                {

                    return;

                }

                setAsChecking(true);

                setAsUserName(false);

                accountService.findUserByUserId(val).then(function (data) {

                    if (angular.isObject(data)) {

                        setAsChecking(false);

                        setAsUserName(false);

                    } else {

                        setAsChecking(false);

                        setAsUserName(true);

                    }

                }, function (errordata) {

                    setAsChecking(false);

                    setAsUserName(true);

                });

                return val;

            });

        }

    };

})

html5的代码：

 <div class="panel panel-info" ng-controller="registUserCtrl">

            <div class="panel-heading">

                <h4>

                    <span class="glyphicon glyphicon-user"></span>添加用户

                </h4>

            </div>

            <div class="panel-body">

                <form name="formRegister" class="form-horizontal" ng-submit="operate.addUser(formRegister.$valid)" novalidate role="form">

                    <div class="form-group">

                        <label for="userId" class="col-md-3 control-label">用户账号</label>

                        <div class="col-md-5">

                            <input type="text" ng-model="vm.userId" name="userId" placeholder="输入工号"

                                   class="form-control" required data-ensure-user-unique />

                            <div class="error-messages" ng-messages="formRegister.userId.$error" ng-if="formRegister.userId.$touched" ng-message-multiple>

                                <small ng-message="required">账号不能为空</small>

                                <small ng-message="checkingAvailability">检测该用户信息...</small>

                                <small ng-message="usernameAvailability">该用户已经注册过了</small>

                            </div>

                        </div>

                    </div>

                    <div class="form-group">

                        <label for="password" class="col-md-3 control-label">用户密码</label>

                        <div class="col-md-5">

                            <input type="password" name="password" ng-model="vm.password" placeholder="输入密码"

                                   class="form-control" required />

                            <div class="error-messages" ng-messages="formRegister.password.$error" ng-if="operate.showValidation">

                                <small ng-message="required">密码不能为空</small>

                            </div>

                        </div>

                    </div>

                    <div class="form-group">

                        <div class="col-md-5 col-md-offset-3">

                            <button type="submit" class="btn btn-primary">保存</button>

                            <button type="button" class="btn btn-default" ng-click="operate.cancel()">取消</button>

                        </div>

                    </div>

                    <div class="form-group">

                        <div class="col-md-5 col-md-offset-3" ng-show="operate.msgDisplay">

                            <div ng-class="operate.result==true ? 'alert alert-success':'alert alert-danger'">

                                <span>{{operate.message}}</span>

                            </div>

                        </div>

                    </div>

                </form>

            </div>

            <div class="panel-footer"></div>

        </div>

以上才是正确的写法。填坑完毕。希望看完此文后的同学可以少走此弯路。