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调用以将数据发送到服务器。我认为它会奏效。

AngularJS - 防止表单清除

2 个答案: