Question

我正在创建我的第一个角度应用程序，刚刚设置了一个使用ngResource与我的Rails Web服务进行通信的表单。我发现this tutorial非常有助于我的验证工作。

然而，我确实有一个小问题。当我第一次提交表单时，没有输入任何值，我的网络服务响应500错误。如果我输入一个字母然后重新提交，它会以422响应（就像它应该的那样）。如果我删除这封信并重新提交它再次响应422（就像它应该）。因此，在第一个空值提交时不显示任何错误消息，但如果我允许系统故意返回错误并重新提交空值，则其行为应该如此。

这是我的代码：

控制器：

$scope.memberData = {};
$scope.create = function() {
    var error, success;
    $scope.errors = {};
    success = function() {
      $scope.memberData = {};
    };    
    error = function(result) {
      return angular.forEach(result.data.errors, function(errors, field) {
        $scope.form[field].$setValidity('server', false);
        $scope.errors[field] = errors.join(', ');
      });    
    };

   BetaMember.save({ beta_member: { email: $scope.memberData.email }}).$promise.then(success, error);

};

查看：

<form ng-submit="create(memberData)" name="form" novalidate>
  <input type="text" ng-model="memberData.email"name="email" server-error>
  <span class="errors" ng-show="form.email.$dirty && form.email.$invalid">
    <span ng-show="form.email.$error.server">{{errors.email}}</span>
  </span>

  <button type="submit" class="btn btn-danger">Join</button>

</form>

指令：

appServices.directive('serverError', function(){
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope,element,attrs,ctrl){
      element.on('change keyup', function(){
        scope.$apply(function(){
          ctrl.$setValidity('server', true);
        });
      });
    }
  };
});

我的问题

如果我最初提交一个空表单，为什么会导致Web服务呈现服务器错误（500）？在提交一个随机值后，它没有通过服务器验证并呈现422错误（显示在我的表单中）并重新提交一个空表单，我收到422错误，指出该字段是必需的。

Angular Server端表单验证

0 个答案: