2014-04-02 56 views
1

当我的表单提交了ng-submit =“createNewOrder()”时,我调用一个执行服务器端验证的资源服务。但是,服务返回后,表单域将被清除。如何阻止Angular清除字段,直到资源服务返回表示成功的响应?AngularJS - 防止表单清除

编辑:添加代码

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: { } } 
     }); 
    }); 
+0

编写代码,我也有一个表单,没有什么清楚的,所以也许这是代码中的错误。 – mautrok

+0

看到这个答案 - http://stackoverflow.com/questions/16153313/saving-new-models-using-angularjs-and-resource/33991999#33991999 – Vivek

回答

0

我想你是在提交表格。而不是这样做,做一个ajax调用发送数据到服务器。我认为它会起作用。

+0

这不是很清楚我... – glepretre

+0

这对我来说是完美的!谢谢! –

1

我的问题是,我打电话:

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

这将导致$ scope.newOrder对象与由该资源服务的创建方法返回的JSON对象覆盖。这会清除所有表单域,因为我返回了一个错误对象。

此更改为:

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

修复该问题。

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

希望能帮助那些有类似问题的人。

+0

这也解决了我的问题,谢谢 – VsMaX

+0

https://docs.angularjs.org/api/ngResource/service/$resource它说没有创建方法,只有保存在那里。 – Vivek