Javascript 服务器端表单验证

我正在创建我的第一个angular应用程序，刚刚完成一个表单的设置，该表单使用ngResource与我的Rails web服务进行对话。我发现让我的验证工作非常有帮助

不过，我有一个小问题。当我第一次提交表单时，没有输入任何值，我的web服务会以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);

};

视图：

我的问题

---

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

不清楚您在这里问什么。我已更新了问题@pablochan。

<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);
        });
      });
    }
  };
});