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

小编典典

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

angularjs

我试图了解如何执行以下操作：

声明表单的可接受方式是什么。我的理解是，您只需用HTML声明表单，并添加ng-model指令，如下所示：

ng-model="item.name"

要发送到服务器的内容。我可以将item对象作为JSON发送到服务器，然后对其进行解释。然后，我可以对对象执行验证。如果失败，则抛出JSON错误，然后发回确切的信息？有接受的方式吗？如何以一种很好的方式将验证错误从服务器推送到客户端？

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

编辑：看来我的措辞很差。

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

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

{
  ...data...

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

然后绑定到DOM。

阅读 208

2020-07-04

共1个答案

小编典典

我最近也一直在玩这种东西，我敲了这个演示。我认为它可以满足您的需求。

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

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

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

这是控制器：

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获取表单。（如果您想了解表单控制器的工作原理，请参见表单控制器的源代码）。

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

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

希望能有所帮助

2020-07-04