如何验证 AngularJS 中的 keyup 函数

Question

我在这里使用网络 API 和 AngularJS 我正在尝试如果我的 keyup 功能无效那么它会显示给我 select 另一封电子邮件。

 public IHttpActionResult GetEailCount(string email)
        {
         int obj= objrepo.countEmployee(email);
         if (obj == 1)
             return Ok("Email already exist please check another...");
         else
             return Content(HttpStatusCode.Accepted, "Email available..");
        }

AngularJS:

<input type="text" name="emailtxt" ng-model="emailsId" ngkeyup="Getvaliedemail(emailsId)" required /> 
        <span class="help-block" ng-show="(f1.emailtxt.Getvaliedemail.$valid)">Email exist</span>

这里如何根据我的代码显示错误消息

 $scope.Getvaliedemail = function (someval) {

        if (someval.length > 3) {
            Empfac.Employemail(someval).then(function (d) {
                $q.resolve(d);
            }).catch(function (xhr) {
                $q.reject(xhr);
            })
        }
    }

})
 EmployeeFactory.Employemail = function (mail) {
            debugger;
            alert()
            return $http({
                url: 'http://localhost:63252/Api/Home/GetEailCount/' + mail,
                mathod: 'GET',
                headers: {
                    "Content-Type": "application/json"
                },
                data: mail
            })
        }

Answer 1

为此，您必须使用指令 $asyncValidators。

var app = angular.module("sa", []);

app.factory('EmployeeFactory', function ($http) {
    var obj = {};
    obj.Employemail = function (mail) {
        return $http({
            url: 'http://localhost:63252/Api/Home/GetEailCount/' + mail,
            mathod: 'GET',
            headers: {
                "Content-Type": "application/json"
            },
            data: mail
        })
    };

    return obj;
});

app.directive('validateEmailFoo', function($q, EmployeeFactory) {
    return {
        require: 'ngModel',
        retrict: 'A',
        link: function ($scope, $element, $attr, ngModelCtrl) {
            ngModelCtrl.$asyncValidators.Getvaliedemail = function (modelValue, viewValue) {
                var someval = modelValue || viewValue;

                var deferred = $q.defer();

                EmployeeFactory.Employemail(someval).then(function (d) {
                    if (d.status == 202) {
                        deferred.resolve(d);        // validation passes
                    } else if (d.status == 200) {
                        deferred.reject(xhr);       // validation fails
                    }
                }).catch(function (xhr) {
                    deferred.reject(xhr);       // validation fails
                })

                return deferred.promise;
            };
        }
    };
});

app.controller("FooController", function ($scope) {

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<div ng-app="sa" ng-controller="FooController">
  <form name="f1">
    <input type="text" name="emailtxt" ng-model="emailsId" required validate-email-foo /> 
    <span class="help-block" ng-show="f1.emailtxt.$error.Getvaliedemail">Email exist</span>
  </form>
</div>

关注ng-show="f1.emailtxt.$error.Getvaliedemail".

请记住，我假设您的服务器将响应 202 状态代码表示电子邮件不存在，200 状态代码表示电子邮件存在。

此处的代码将始终无法通过验证，因为本地主机 URL 无效并因此被拒绝。尝试一些实时服务器

如何验证 AngularJS 中的 keyup 函数

How can I validate keyup function in AngularJS

angularjs

angularjs-ng-model

angularjs-validation