angularjs $setValidity 在检查电子邮件唯一性时不起作用

Question

我使用指令来检查电子邮件是否已在我的数据库中注册。

app.directive('uniqueEmail', function($http) {
    var toId;
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elem, attr, ctrl) { 
        //when the scope changes, check the email.
        scope.$watch(attr.ngModel, function(value) {
                // if there was a previous attempt, stop it.
                if(toId) clearTimeout(toId);
                // start a new attempt with a delay to keep it from
                // getting too "chatty".
            toId = setTimeout(function(){
                // call to some API that returns { isValid: true } or { isValid: false }
                    $http.get('check/e/' + value).success(function(data) {
                    //set the validity of the field
                        ctrl.$setValidity("uniqueEmail", data.isValid);
                    });
                }, 200);
        })
        }
    }
}); 

和我的输入:

<form name="myForm">    
<input type="email" ng-model="userEmail" name="userEmail" required unique-email/>
<tt>myForm.userEmail.$error = {{myForm.userEmail.$error}}</tt>
</form>

我的问题是 $error.uniqueEmail 总是假的。当电子邮件可用时，$http 响应显示为 false，当电子邮件已注册时显示为 true。 (添加 alert(data.isValid) 确认了这一点。

我还尝试从 $http 响应中切换真/假语句，但没有成功(电子邮件已注册 = 假，电子邮件可用 = 真)。

我错过了什么？

编辑 :
好的，我找到了问题

ctrl.$setValidity("uniqueemail", false) shows true和 ctrl.$setValidity("uniqueemail", true) shows false

http 的响应是 {"isValid":"true"} 并且它必须是 {"isValid":true}(不带引号)

我从 http 响应中切换了 true/false 语句，因此当必须触发错误(电子邮件已注册)时，响应必须为 {"isValid":false}

Answer 1

如果您使用 type="email"，则根本不需要正则表达式. Angular 会关心你的验证。

angular.module('directives.emailUnique', [])
    .directive('emailUnique', ['$http', function ($http) {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, el, attrs, ctrl) {

                ctrl.$parsers.push(function (viewValue) {
                    if (!viewValue) {
                        ctrl.$setValidity('emailUnique', true);
                        return undefined;
                    }
                    $http.get('/api/emailunique/' + viewValue).success(function (data) {
                        if (data.data && data.data.unique)
                            ctrl.$setValidity('emailUnique', true);
                        else
                            ctrl.$setValidity('emailUnique', false);
                    }).error(function () {
                            alert('Sorry, a technical issue prevents to validate your email.\n ' +
                                'Thanks to retry later.');
                        });
                    return viewValue;
                });
            }
        };
    }]);

实现纯粹实践 TDD 来处理所有情况，这是规范:

describe('emailUnique directive', function () {
    var $scope, form, $httpBackend;

    beforeEach(function () {
        module('directives.emailUnique');
        inject(function ($compile, $rootScope, _$httpBackend_) {
            $scope = $rootScope;
            $httpBackend = _$httpBackend_;
            var element = angular.element(
                '<form name="form" novalidate><input name="email" type="email" ng-model="model.email" required email-unique/></form>'
            );
            $scope.model = {
                email: ''
            };
            $compile(element)($scope);
            $scope.$digest();
            form = $scope.form;
        });
    });

    afterEach(function () {
        $httpBackend.verifyNoOutstandingExpectation();
        $httpBackend.verifyNoOutstandingRequest();
    });

    describe('email uniqueness', function () {
        it('should return the current value if the email is a valid one', function () {
            $httpBackend.whenGET('/api/emailunique/michael@gmail.com').respond(200, {data: {unique: true}});
            setViewValue('michael@gmail.com');
            $httpBackend.flush();
            expect($scope.model.email).toBe('michael@gmail.com');
            $httpBackend.whenGET('/api/emailunique/david@gmail.com').respond(200, {data: {unique: true}});
            setViewValue('david@gmail.com');
            $httpBackend.flush();
            expect($scope.model.email).toBe('david@gmail.com');
        });
        it('emailUnique validity should not be evaluated to true if email is invalid', function () {
            setViewValue('michael');
            expect(form.email.$error.emailUnique).not.toBe(true);
        });
        it('should set emailUnique validity to true if email is unique', function () {
            $httpBackend.whenGET('/api/emailunique/michael@gmail.com').respond(200, {data: {unique: true}});
            setViewValue('michael@gmail.com');
            $httpBackend.flush();
            expect(form.email.$error.emailUnique).toBe(false);
        });
        it('should not set emailUnique validity to true if email is not unique', function(){
            $httpBackend.whenGET('/api/emailunique/david@gmail.com').respond(200, {data: {unique: false}});
            setViewValue('david@gmail.com');
            $httpBackend.flush();
            expect(form.email.$error.emailUnique).toBe(true);
        });
        it('should call emailUnique server api if email is valid, to check for uniqueness', function(){
            $httpBackend.expectGET('/api/emailunique/michael@gmail.com').respond(200, {data: {unique: true}});
            setViewValue('michael@gmail.com');
            $httpBackend.flush();
        });
        it('should set emailUnique to true if ' +
            'it was first evaluated as not unique and then back to an invalid one', function(){
            $httpBackend.whenGET('/api/emailunique/david@gmail.com').respond(200, {data: {unique: false}});
            setViewValue('david@gmail.com');
            $httpBackend.flush();
            setViewValue('michaelgmail.com');
            expect(form.email.$error.emailUnique).toBe(false);
        });
    });

    function setViewValue(email) {
        form.email.$setViewValue(email);
        $scope.$digest();
    }
});