AngularJS - 防止表单清除

Question

当我使用 ng-submit="createNewOrder()" 提交表单时，我会调用一个资源服务来执行一些服务器端验证。但是，服务返回后，表单字段会被清除。在资源服务返回指示成功的响应之前，如何防止 Angular 清除字段？

编辑：添加代码

HTML：

<div ng-app="OrdersApp" ng-controller="OrdersController" class="ng-scope">
  <form name="newOrderForm" ng-submit="createNewOrder();" novalidation>
    <label>First Name</label>
    <input type="text" ng-model="newOrder.firstName" required>
    <label>Last Name</label>
    <input type="text" ng-model="newOrder.lastName" required>
    etc.
  </form>
</div>

应用：

var app = angular.module('OrdersApp', ['orderServices']);

控制器：

app.controller('OrdersController', function ($scope, Order) {
  $scope.newOrder = new Order({ });
  $scope.createNewOrder = function () {
    $scope.newOrder.$create(
      function(successData) {
        if (successData.error) return alert('order was not saved successfully');
        alert('order successfully charged and created');
      },
      function(errorData) { 
        alert('order was not saved successfully: ' + JSON.stringify(errorData));
      }
    );
  };
});

服务：

angular.module('orderServices', ['ngResource']).
  factory('Order', function ($resource) {
    return $resource('/admin/json/orders', {},
      {
        query: { method: 'GET', params: { }, isArray: true },
        create: { method: 'POST', params: { } },
        save: { method: 'PUT', params: { } }
      });
  });

Answer 1

我的问题是我正在打电话：

$scope.newOrder.$create(...)

这将导致 $scope.newOrder 对象被资源服务的 create 方法返回的 JSON 对象覆盖。然后这会清除所有表单字段，因为我返回了一个错误对象。

将其更改为：

Order.create($scope.newOrder, ...)

解决了这个问题。

我也可以更改资源服务以返回非 200 HTTP 状态代码，并且我相信我的对象不会被覆盖。

希望对遇到类似问题的人有所帮助。

Answer 2

我认为您正在提交表单。不要这样做，而是进行 ajax 调用以将数据发送到服务器。我认为它会起作用。