我有一个角度应用程序,其中包含一个从示例中获取的保存按钮:
<button ng-click="save" ng-disabled="form.$invalid">SAVE</button>
这对于客户端验证非常有用,因为form.$invalid当用户解决问题时它会变为false,但是我有一个电子邮件字段,如果另一个用户使用相同的电子邮件注册,则该字段设置为无效。
form.$invalid
一旦我将电子邮件字段设置为无效,就无法提交表单,并且用户无法修复该验证错误。所以现在我不能再使用form.$invalid来禁用我的提交按钮。
肯定有更好的办法
我在几个项目中都需要这样做,所以我创建了一个指令。最后花了一点时间将它放在GitHub上,以供任何需要嵌入式解决方案的人使用。
https://github.com/webadvanced/ng-remote- validate
特征:
直接使用Ajax验证任何文本或密码输入的解决方案
与Angulars内置验证一起使用,可以通过formName.inputName。$ error.ngRemoteValidate访问
节流服务器请求(默认为400毫秒),可以使用 ng-remote-throttle="550"
ng-remote-throttle="550"
允许HTTP方法定义(默认POST)与 ng-remote-method="GET"
ng-remote-method="GET"
要求用户输入当前密码和新密码的更改密码表单的示例用法:
<h3>Change password</h3> <form name="changePasswordForm"> <label for="currentPassword">Current</label> <input type="password" name="currentPassword" placeholder="Current password" ng-model="password.current" ng-remote-validate="/customer/validpassword" required> <span ng-show="changePasswordForm.currentPassword.$error.required && changePasswordForm.confirmPassword.$dirty"> Required </span> <span ng-show="changePasswordForm.currentPassword.$error.ngRemoteValidate"> Incorrect current password. Please enter your current account password. </span> <label for="newPassword">New</label> <input type="password" name="newPassword" placeholder="New password" ng-model="password.new" required> <label for="confirmPassword">Confirm</label> <input ng-disabled="" type="password" name="confirmPassword" placeholder="Confirm password" ng-model="password.confirm" ng-match="password.new" required> <span ng-show="changePasswordForm.confirmPassword.$error.match"> New and confirm do not match </span> <div> <button type="submit" ng-disabled="changePasswordForm.$invalid" ng-click="changePassword(password.new, changePasswordForm);reset();"> Change password </button> </div> </form>