Question

我需要为客户端验证错误显示不同的消息，例如所需的消息（This Field is Required）和来自后端的服务器端错误消息，例如（Entered Password is incorrect）。

我现在在做什么 - 在myController.js中：当用户未提供任何值并尝试提交时，我设置$scope.message = "This Field is Required";，会显示上述错误。

但是一旦他给出了值，它会去服务器检查它的有效和服务器是否返回另一条错误消息，即Entered Password is incorrect作为响应，如果它无效。

因此，如果我将此响应值设置为$scope.message，它会覆盖以前的值并正确显示，但如果用户尝试使用空白值提交已显示的重写错误消息，则会再次出现问题。但在这里它应该显示所需的消息，即This Field is Required。

如何实施？

Answer 1

您可以创建一个自定义Angular Directive，用于验证服务器上的密码。如果有任何错误，请在$validators管道中添加错误。

示例：创建指令以检查用户名可用性

ngModule.directive('usernameAvailableValidator', ['$http', function($http) {
  return {
    require : 'ngModel',
    link : function($scope, element, attrs, ngModel) {
      ngModel.$asyncValidators.usernameAvailable = function(username) {
        return $http.get('/api/username-exists?u='+ username);
      };
    }
  }
}])

HTML：

<form name="myForm">
<!-- 
  first the required, pattern and minlength validators are executed
  and then the asynchronous username validator is triggered...
-->
<input type="text"
       class="input"
       name="username"
       minlength="4"
       maxlength="15"
       ng-model="form.data.username"
       pattern="^[-\w]+$"
       username-available-validator
       placeholder="Choose a username for yourself"
       required />
<div ng-if="myForm.colorCode.$error.usernameAvailable">Error Message HERE!</div>
</form>

AngularJs Form的客户端和服务器端错误消息显示

1 个答案: