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

Question

我正在尝试了解如何执行以下操作:

声明表单的公认方式是什么。我的理解是你只需在 HTML 中声明表单，然后像这样添加 ng-model 指令:

ng-model="item.name"

发送到服务器的内容。我可以将项目对象作为 JSON 发送到服务器，并对其进行解释。然后我可以对对象执行验证。如果失败，我会抛出一个 JSON 错误，并返回究竟是什么？有没有一种公认的方式来做到这一点？如何以一种不错的方式将验证错误从服务器推送到客户端？

我确实需要一个示例，但 Angulars 文档很难理解。

编辑:看来我的问题表述得很糟糕。

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

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

{
  ...data...

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

然后绑定(bind)到 DOM。

Answer 1

我最近也在玩这种东西，敲了this demo .我认为它可以满足您的需求。

使用您要使用的任何特定客户端验证正常设置您的表单:

<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>

另外请注意，我为每个字段添加了一个 serverMessage:

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

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

这里是 Controller :

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

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

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

您可以从范围访问表单，在这种情况下，表单称为 myForm，因此 $scope.myForm 会为您获取表单。 (form controller is here 的来源，如果您想了解它的工作原理)。

然后你想告诉表单该字段是否有效/无效:

$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]);

希望有帮助