AngularJS-服务器端验证和客户端表单

Question

我试图了解如何做以下事情：

声明表单的公认方式是什么。我的理解是您只需用超文本标记语言声明表单，然后添加ng-model指令，如下所示：

ng-model="item.name"

发送到服务器的内容。我可以将item对象作为JSON发送到服务器，并对其进行解释。然后我可以对对象执行验证。如果失败，我抛出一个JSON错误，并返回具体内容？有没有公认的方法？如何以一种好的方式将验证错误从服务器推送到客户端？

我真的需要一个例子，但是Angulars文档很难理解。

编辑：看来我的问题措辞不当。

我知道如何验证客户端，以及如何在promise回调时处理错误/成功。我想知道的是，将服务器端错误消息捆绑到客户端的公认方式。假设我有一个用户名和密码注册表单。我不想轮询服务器的用户名，然后使用Angular来确定是否存在重复项。我想将用户名发送到服务器，验证不存在具有相同名称的其他帐户，然后提交表单。如果出现错误，我如何将其发送回？

将数据按原样（键和值）推送到服务器，并附加一个错误字段，如下所示：

{
  ...data...

  "errors": [
    {
      "context": null,
      "message": "A detailed error message.",
      "exceptionName": null
    }
  ]
}

然后绑定到DOM。

Answer 1

Derek Ekins给出的答案很好。但是：如果您使用“myForm.invalid”禁用“submit”按钮，则该按钮不会自动返回到“enabled”，因为基于服务器的错误状态似乎没有改变。即使您再次编辑表单中的所有字段以符合有效输入（基于客户端验证），也不行。

Answer 2

我有和Derek类似的解决方案，在codetunes博客上描述过。TL；博士：

>

以与Derek的解决方案类似的方式显示错误：

<span ng-show="myForm.fieldName.$error.server">{{errors.fieldName}}</span>

添加指令，该指令将在用户更改输入时清除错误：

<input type="text" name="fieldName" ng-model="model.fieldName" server-error />

angular.module('app').directive 'serverError', ->
  {
    restrict: 'A'
    require: '?ngModel'
    link: (scope, element, attrs, ctrl) ->
      element.on 'change', ->
        scope.$apply ->
          ctrl.$setValidity('server', true)
  }

通过将错误消息传递给作用域并告诉表单有错误来处理错误：

errorCallback = (result) ->
  # server will return something like:
  # { errors: { name: ["Must be unique"] } }
  angular.forEach result.data.errors, (errors, field) ->
    # tell the form that field is invalid
    $scope.form[field].$setValidity('server', false)
    # keep the error messages from the server
    $scope.errors[field] = errors.join(', ') 

希望它会有用：）

Answer 3

我最近也在玩这种东西，我已经制作了这个演示。我认为它能满足你的需要。

使用您想要使用的任何特定客户端验证，按照常规设置表单：

<div ng-controller="MyCtrl">
    <form name="myForm" onsubmit="return false;">
        <div>
            <input type="text" placeholder="First name" name="firstName" ng-model="firstName" required="true" />
            <span ng-show="myForm.firstName.$dirty && myForm.firstName.$error.required">You must enter a value here</span>
            <span ng-show="myForm.firstName.$error.serverMessage">{{myForm.firstName.$error.serverMessage}}</span>
        </div>
        <div>
            <input type="text" placeholder="Last name" name="lastName" ng-model="lastName"/>
            <span ng-show="myForm.lastName.$error.serverMessage">{{myForm.lastName.$error.serverMessage}}</span>
        </div>
        <button ng-click="submit()">Submit</button>
    </form>
</div>

注意，我还为每个字段添加了一条服务器消息：

<span ng-show="myForm.firstName.$error.serverMessage">{{myForm.firstName.$error.serverMessage}}</span>

这是一条从服务器返回的可定制消息，其工作方式与任何其他错误消息相同（据我所知）。

这是控制器：

function MyCtrl($scope, $parse) {
      var pretendThisIsOnTheServerAndCalledViaAjax = function(){
          var fieldState = {firstName: 'VALID', lastName: 'VALID'};
          var allowedNames = ['Bob', 'Jill', 'Murray', 'Sally'];

          if (allowedNames.indexOf($scope.firstName) == -1) fieldState.firstName = 'Allowed values are: ' + allowedNames.join(',');
          if ($scope.lastName == $scope.firstName) fieldState.lastName = 'Your last name must be different from your first name';

          return fieldState;
      };
      $scope.submit = function(){
          var serverResponse = pretendThisIsOnTheServerAndCalledViaAjax();

          for (var fieldName in serverResponse) {
              var message = serverResponse[fieldName];
              var serverMessage = $parse('myForm.'+fieldName+'.$error.serverMessage');

              if (message == 'VALID') {
                  $scope.myForm.$setValidity(fieldName, true, $scope.myForm);
                  serverMessage.assign($scope, undefined);
              }
              else {
                  $scope.myForm.$setValidity(fieldName, false, $scope.myForm);
                  serverMessage.assign($scope, serverResponse[fieldName]);
              }
          }
      };
}

我在假装Thisisontheserverandcalledviaajax中调用服务器，你可以用一个ajax调用替换它，关键是它只返回每个字段的验证状态。在这个简单的例子中，我使用值VALID来表示字段有效，任何其他值都被视为错误消息。你可能想要更复杂的东西！

从服务器获得验证状态后，只需更新表单中的状态。

您可以从scope访问表单，在这种情况下，表单称为myForm。myForm为您获取表单。（如果您想了解表单控制器的工作原理，请参阅此处）。

然后，您想告诉表单该字段是否有效/无效：

$scope.myForm.$setValidity(fieldName, true, $scope.myForm);

或

$scope.myForm.$setValidity(fieldName, false, $scope.myForm);

我们还需要设置错误消息。首先，使用$parse获取字段的访问器。然后从服务器分配值。

var serverMessage = $parse('myForm.'+fieldName+'.$error.serverMessage');
serverMessage.assign($scope, serverResponse[fieldName]);

希望那有帮助