Angular:嵌套模型服务器端验证和消息显示

时间:2015-11-29 00:23:27

标签: javascript angularjs validation

我正在尝试验证并在服务器端显示消息。我能够显示某些属性的消息。但对于嵌套属性,我正在努力。在这里,我可以验证并显示电子邮件的消息,但不会针对usernamepassword进行验证。 Usernamepassword位于credential模型中,这是用户模型的属性。

<form name="form" ng-submit="rgCtrl.register()" role="form" method="post">   
     <div class="form-group" ng-class="{ 'has-error': form.email.$dirty && form.email.$error.required }">
            <label for="email">Email</label>
            <input type="text" name="email" id="email" class="form-control" ng-model="rgCtrl.user.email" required server-error /> <span ng-show="form.email.$dirty && form.email.$error.required" class="help-block">Email is required</span> <span class="errors" ng-show="form.email.$dirty && form.email.$invalid"> <span ng-show="form.email.$error.server">{{errors.email}}</span>
            </span>
        </div>
        <div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$error.required }">
            <label for="credential.username">Username</label>
            <input type="text" name="credential.username" class="form-control" ng-model="rgCtrl.user.credential.username" required server-error /> <span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is
                        required</span> <span class="errors" ng-show="form.credential.username.$dirty && form.credential.username.$invalid">
                        <span ng-show="form.credential.username.$error.server">{{errors.credential.username}}</span>
            </span>
        </div>
        <div class="form-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }">
            <label for="credential.password">Password</label>
            <input type="password" name="credential.password" id="password" class="form-control" ng-model="rgCtrl.user.credential.password" required server-error /> <span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is
                        required</span> <span class="errors" ng-show="form.credential.password.$dirty && form.credential.password.$invalid">
                        <span ng-show="form.credential.password.$error.server">{{errors.credential.password}}</span>
            </span>
        </div>
    .
    .
    .
    </form>

注册方法:

function register() {
            UserSvc.Create(vm.user).then(function (response) {
                if (response.success) {
                   $location.path('/login');
                } else {
                    angular.forEach(response.errors, function(errors, field) {
                        $scope.form[field].$setValidity('server', false);
                        $scope.errors[field] = errors;
                    });

                }
            });
        }

服务器错误指令:

angular.module('app').directive('serverError', function() {
        return {
            restrict : 'A',
            require : '?ngModel',
            link : function(scope, element, attrs, ctrl) {
                element.on('change', function() {
                    return scope.$apply(function() {
                        return ctrl.$setValidity('server', true);
                    });
                });
            }
        }
    });

有什么建议吗?我不知道它有什么问题。

0 个答案:

没有答案