当表单有错误时,Django与angular.js表单提交无效

时间:2014-10-16 08:54:50

标签: django angularjs django-forms

我试图以正常的django形式添加一些angular.js东西(我实际上是使用django-crispy-forms)。我通常通过POST请求提交表单而不使用angular(我只是使用angular来表示我需要的那些控件)。

表单实际上在提交时没有错误:它正常发布,我被重定向到成功页面。但是,如果表单中有错误(fe缺少字段),我会得到一个响应的闪烁(我看到{{form.errors}}缺少哪些字段但是在一段时间后(<1秒)我得到了控制台中的以下输出:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.3.0/$rootScope/infdig?p0=10&p1=%5B%5D
    at REGEX_STRING_REGEXP (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:80:12)
    at Scope.$get.Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:14003:19)
    at Scope.$get.Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:14227:24)
    at bootstrapApply (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:1487:15)
    at Object.invoke (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:4152:17)
    at doBootstrap (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:1485:14)
    at bootstrap (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:1505:12)
    at angularInit (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:1399:5)
    at HTMLDocument. (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:25579:5)
    at m.Callbacks.j (http://127.0.0.1:8115/static_lcs/jquery-1.11.1.min.js:2:27244) angular.js:11358
Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.3.0/$rootScope/infdig?p0=10&p1=%5B%5D angular.js:80
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.3.0/$rootScope/infdig?p0=10&p1=%5B%5D
    at REGEX_STRING_REGEXP (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:80:12)
    at Scope.$get.Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:14003:19)
    at Scope.$get.Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:14227:24)
    at done (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:9493:47)
    at completeRequest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:9678:7)
    at XMLHttpRequest.requestLoaded (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:9621:9) angular.js:11358
Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.3.0/$rootScope/infdig?p0=10&p1=%5B%5D angular.js:80
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.3.0/$rootScope/infdig?p0=10&p1=%5B%5D
    at REGEX_STRING_REGEXP (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:80:12)
    at Scope.$get.Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:14003:19)
    at Scope.$get.Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:14227:24)
    at done (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:9493:47)
    at completeRequest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:9678:7)
    at XMLHttpRequest.requestLoaded (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:9621:9) angular.js:11358
Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.3.0/$rootScope/infdig?p0=10&p1=%5B%5D angular.js:80
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.3.0/$rootScope/infdig?p0=10&p1=%5B%5D
    at REGEX_STRING_REGEXP (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:80:12)
    at Scope.$get.Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:14003:19)
    at Scope.$get.Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:14227:24)
    at done (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:9493:47)
    at completeRequest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:9678:7)
    at XMLHttpRequest.requestLoaded (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:9621:9) angular.js:11358
Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.3.0/$rootScope/infdig?p0=10&p1=%5B%5D 

并通过GET请求重新加载页面。所以我丢失了所有更改和错误消息。

现在,我知道大多数时候提到的异常与观看表达有关。然而,在我的情况下,这是不正确的,因为我检查了所有的手表表达式,甚至完全禁用了它们。此外,我在Google中添加了例外暂停,并注意到以下代码的this.$eval(expr);引发了此异常:

$apply: function(expr) {
        try {
          beginPhase('$apply');
          return this.$eval(expr);
        } catch (e) {
          $exceptionHandler(e);
        } finally {
          clearPhase();
          try {
            $rootScope.$digest();
          } catch (e) {
            $exceptionHandler(e);
            throw e;
          }
        }
      },

expr包含以下字符串:

function () {
          element.data('$injector', injector);
          compile(element)(scope);
        } 

任何人 - 比我更有经验的angular.js - 向我解释发生了什么?

请不要告诉我使用django-angular 来使用angular.js的正常流量提交。我将仅作为最后的手段检查这些解决方案。正如我前面所说的,当有 no 错误时,表单提交没有问题,我只在POST返回错误时才会出现这种情况。

TIA

1 个答案:

答案 0 :(得分:0)

其实我解决了它:

在我的表单的__init__方法中我有self.helper.form_action ='#'以使angular.js发布表单(如果你离开动作空角度希望使用ajax处理表单)。当我将其更改为self.helper.form_action ='.'时,它有效!