Javascript 如何在解析前取消/忽略AngularJS异步验证检查?
我有一个简单的HTML5用户注册表。使用添加到Javascript 如何在解析前取消/忽略AngularJS异步验证检查?,javascript,angularjs,validation,angularjs-forms,Javascript,Angularjs,Validation,Angularjs Forms,我有一个简单的HTML5用户注册表。使用添加到$asyncValidators的自定义函数验证用户名输入的值,以确保没有具有相同用户名的用户 考虑以下情况: 用户开始输入用户名(例如,“我”) 稍微延迟后,Angular验证程序运行,向服务器发送异步请求,询问用户名是否可用 用户开始键入更多字符(例如,“Me123”) 在另一个轻微的延迟之后,Angular再次尝试通过向服务器发送另一个请求来验证用户名 当Angular收到关于用户名有效性的两个响应时,它会做什么?有没有办法优雅地处理这个问题
$asyncValidators
的自定义函数验证用户名输入的值,以确保没有具有相同用户名的用户
考虑以下情况:
用户开始输入用户名(例如,“我”)
稍微延迟后,Angular验证程序运行,向服务器发送异步请求,询问用户名是否可用
用户开始键入更多字符(例如,“Me123”)
在另一个轻微的延迟之后,Angular再次尝试通过向服务器发送另一个请求来验证用户名
当Angular收到关于用户名有效性的两个响应时,它会做什么?有没有办法优雅地处理这个问题
我想做的是在用户修改用户名值后立即取消或告诉Angular忽略第一次验证尝试的结果
编辑2015年12月11日:
帮助我澄清我的问题。这里有两件:
中止实际HTTP请求
告诉Angular验证过程停止等待解析或拒绝从$asyncValidators.usernameAvailable
返回的承诺
我可以使用$http
服务的timeout
选项来完成第一步。我的问题是:做第二件事是必要的、可取的还是可能的?如果是,怎么做
我认为这可能发生在添加到指令link
中元素的akeyup
事件处理程序中。见下文:
index.html
<input
ng-model="user.username"
ng-model-options="{ debounce: 250 }"
check-availability />
最简单的方法是禁用用户输入,如:
<input
name="username"
ng-model="user.username"
ng-model-options="{ updateOn: 'blur' }"
ng-disabled="myForm.$pending"
check-availability />
因此,一旦用户从用户名字段中签出,就会触发验证并禁用该字段(您也可以禁用提交按钮)
如果这不是一个可接受的用户体验,您可以使用下面描述的方法:
本质上,$http
允许在其timeout
属性上设置承诺。如果随后解析该属性,http调用将中止。在验证器中找出最佳方法可能需要一些尝试和错误。感谢您提供这篇优秀文章的链接。当我有机会的时候,我会仔细考虑一下,看看它是否对我有效。考虑到这一点,$http
的timeout
选项虽然相关,但并不能解决/回答我的实际问题。取消/超时实际的HTTP请求可能很好,但我还想中止角度验证过程。我将编辑这个问题来澄清这一点。看来AngularJS应该注意这一点。我不确定它是否会,但它似乎将是解决这个问题的方法。然而,我看到了不一致的结果。。。如果第一个$http调用比第二个调用花费的时间更长,那么承诺(因此验证结果)的评估就不符合顺序了。@dprothero,是的,我也得到了不一致的结果。似乎给出了期望的验证结果。然而,在我的本地开发环境中,一个非常类似的场景产生了相反的结果。
<input
name="username"
ng-model="user.username"
ng-model-options="{ updateOn: 'blur' }"
ng-disabled="myForm.$pending"
check-availability />