AngularJS - prevent形式来明确 [英] AngularJS - Prevent Form Clear

问题描述

在我的形式，用NG-提交=createNewOrder（），提交我调用执行一些服务器端验证的资源服务。然而，表单域服务返回后清零。如何以prevent角从清场，直到资源服务返回一个表示成功的回应？

编辑：添加code

HTML

 ＆LT; D​​IV NG-应用=OrdersAppNG控制器=OrdersController级=NG-范围＆GT;
  ＆LT;表格名称=newOrderFormNG提交=createNewOrder（）; novalidation＆GT;
    ＆LT;标签＆gt;名＆LT; /标签＆gt;
    ＆LT;输入类型=文本NG模型=newOrder.firstName要求＆GT;
    ＆LT;标签＆gt;姓＆LT; /标签＆gt;
    ＆LT;输入类型=文本NG模型=newOrder.lastName要求＆GT;
    等等
  ＆LT; /表及GT;
＆LT; / DIV＆GT;
 

应用：

  VAR应用= angular.module（'OrdersApp'，['orderServices']）;
 

控制器：

  app.controller（'OrdersController'，函数（$范围，令）{
  $ scope.newOrder =新订单（{}）;
  $ scope.createNewOrder =功能（）{
    $ scope.newOrder。$创建（
      功能（successData）{
        如果（successData.error）返回警报（'订单未成功保存'）;
        警报（'为了成功检控和创建'）;
      }，
      功能（errordata子）{
        警报（'订单未成功保存：'+ JSON.stringify（errordata子））;
      }
    ）;
  };
}）;
 

服务：

  angular.module（'orderServices'，['ngResource']）。
  工厂（订单，函数（$资源）{
    返回$资源（'/管理/ JSON /订单'，{}，
      {
        查询：{方法：GET，则params：{}，IsArray的：真正}，
        创建：{方法：POST，则params：{}}，
        保存：{方法：把'，则params：{}}
      }）;
  }）;
 

解决方案

我的问题是，我打电话：

  $ scope.newOrder。$创建（...）
 

这将使$ scope.newOrder对象与由资源服务的创建方法返回的JSON对象覆盖。然后，这将清除所有的表单字段，因为我返回的错误对象。

将其更改为：

  Order.create（$ scope.newOrder，...）
 

修复该问题。

我也可以改变了资源的服务回报一个非200 HTTP状态code和我相信，我的目标就不会被覆盖。

希望与类似的问题可以帮助那里的人。

When my form, with ng-submit="createNewOrder()", is submitted I call a resource service that performs some server-side validation. However, the form fields are cleared after the service returns. How to I prevent Angular from clearing the fields until the resource service returns a response that indicates success?

Edit: adding the code

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>

App:

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

Controller:

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));
      }
    );
  };
});

Services:

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

解决方案

My issue was that I'm calling:

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

This will cause the $scope.newOrder object to be overwritten with the JSON object that is returned by the create method of the resource service. This then clears all the form fields because I'm returned a error object.

Changing this to:

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

fixes the issue.

I could also have changed the resource service to return a non-200 HTTP status code and I believe my object wouldn't have been overwritten.

Hope that helps anyone out there with a similar issue.

这篇关于AngularJS - prevent形式来明确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！