Question

在遇到angularJS中的FORM POST之前，我遇到了需要调用服务器方法的情况。如果服务器方法返回错误，我需要显示它并保留在最终不执行POST请求的相同方法中。

如何使用AngularJS实现这一目标？

请参阅下面的代码示例

HTML

didEnterRegion

角度控制器

  <form action="http://app.test.com/ProcessTransaction" method="POST">
  <table>
  <tr>
  <td><input type="hidden" name="Amount" value="25.00" /></td>
  </tr>
  <tr>
  <td><input type="hidden" name="Currency" value="NZD" /></td>
  </tr>
  </table>
  <div class="container-fluid align:left"> 
  <button type="submit" class="btn btn-success" ng-disabled="properties.disabled" ng-click="ctrl.action()">{{properties.label}}</button>
  </div>
  </form>

Answer 1

好的，基于OP想要验证表单然后提交表单值的问题。这里有两种方法

1）在输入字段中使用<ng-form> / <form>和required在客户端进行表单验证。 2）我们可以跳过传统的表单提交方式，只需在提交点击时调用我们的提交功能，然后从服务器验证表单，如果成功，则保存表单值或显示错误。

对方法（2）进行以下更改，因为它最适合您的问题。

在HTML中

<form>
  <table>
  <tr>
  <td><input type="hidden" name="Amount" value="25.00" /></td>
  </tr>
  <tr>
  <td><input type="hidden" name="Currency" value="NZD" /></td>
  </tr>
  </table>
  <div class="container-fluid align:left"> 
  <button type="submit" class="btn btn-success" ng-disabled="properties.disabled" ng-click="ctrl.action()">{{properties.label}}</button>
  </div>
  </form>

在JS中

this.action = function action() {

  var req = {
  method: method,
  url: <some_url>,
  data: angular.copy(data_to_sent),
  params: params
  };

  return $http(req)
  .success(function(data, status) {
  $scope.properties.dataFromSuccess = data;//here data can contain whether the form is valid or invalid...so create a boolean at server if it's valid or not..
    if($scope.properties.dataFromSuccess.isSuccess){
     $http.post(URL,formData).success(function(data){
        $scope.dataSaved = data;
    });
    }else{
       $scope.properties.dataFromError = data; //set the errors in the scope to display
    }

  })
  .error(function(data, status) { //this error means request has been failed to process not the validation error we are checking at server..
  //$scope.properties.dataFromError = data;

  })
  .finally(function() {

  });
}

AngularJS FORM POST

HTML

角度控制器

1 个答案: