当表单出现错误时，带有 angular.js 表单提交的 Django 不起作用

Posted 2023-02-24

【中文标题】当表单出现错误时，带有 angular.js 表单提交的 Django 不起作用

【英文标题】：Django with angular.js form submission not working when form has errors

【发布时间】：2014-12-11 13:39:48

【问题描述】：

我正在尝试以普通的 django 形式添加一些 angular.js 内容（我实际上正在使用 django-crispy-forms）。我通常通过 POST 请求提交表单，而不是使用 angular（我只是使用 angular 来处理我在该表单上需要的一些控件）。

表单在提交无错误时实际上正在工作：它已正常发布，我被重定向到成功页面。但是，如果表单中有错误（fe 缺少字段），我会得到一个响应（我看到 form.errors 缺少哪些字段，但过了一段时间（ 错误：[$rootScope:infdig] 达到 10 个 $digest() 迭代。中止！ 在最后 5 次迭代中触发的观察者：[] http://errors.angularjs.org/1.3.0/$rootScope/infdig?p0=10&p1=%5B%5D 在 REGEX_STRING_REGEXP (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:80:12) 在 Scope.$get.Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:14003:19) 在 Scope.$get.Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:14227:24) 在 bootstrapApply (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:1487:15) 在 Object.invoke (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:4152:17) 在 doBootstrap (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:1485:14) 在引导程序（http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:1505:12） 在 angularInit (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:1399:5) 在 html 文档。 (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:25579:5) 在 m.Callbacks.j (http://127.0.0.1:8115/static_lcs/jquery-1.11.1.min.js:2:27244) angular.js:11358 未捕获的错误：[$rootScope:infdig] 达到 10 个 $digest() 迭代。中止！ 在最后 5 次迭代中触发的观察者：[] http://errors.angularjs.org/1.3.0/$rootScope/infdig?p0=10&p1=%5B%5D angular.js:80 错误：[$rootScope:infdig] 达到 10 个 $digest() 迭代。中止！ 在最后 5 次迭代中触发的观察者：[] http://errors.angularjs.org/1.3.0/$rootScope/infdig?p0=10&p1=%5B%5D 在 REGEX_STRING_REGEXP (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:80:12) 在 Scope.$get.Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:14003:19) 在 Scope.$get.Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:14227:24) 完成后（http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:9493:47） 在 completeRequest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:9678:7) 在 XMLHttpRequest.requestLoaded (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:9621:9) angular.js:11358 未捕获的错误：[$rootScope:infdig] 达到 10 个 $digest() 迭代。中止！ 在最后 5 次迭代中触发的观察者：[] http://errors.angularjs.org/1.3.0/$rootScope/infdig?p0=10&p1=%5B%5D angular.js:80 错误：[$rootScope:infdig] 达到 10 个 $digest() 迭代。中止！ 在最后 5 次迭代中触发的观察者：[] http://errors.angularjs.org/1.3.0/$rootScope/infdig?p0=10&p1=%5B%5D 在 REGEX_STRING_REGEXP (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:80:12) 在 Scope.$get.Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:14003:19) 在 Scope.$get.Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:14227:24) 完成后（http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:9493:47） 在 completeRequest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:9678:7) 在 XMLHttpRequest.requestLoaded (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:9621:9) angular.js:11358 未捕获的错误：[$rootScope:infdig] 达到 10 个 $digest() 迭代。中止！ 在最后 5 次迭代中触发的观察者：[] http://errors.angularjs.org/1.3.0/$rootScope/infdig?p0=10&p1=%5B%5D angular.js:80 错误：[$rootScope:infdig] 达到 10 个 $digest() 迭代。中止！ 在最后 5 次迭代中触发的观察者：[] http://errors.angularjs.org/1.3.0/$rootScope/infdig?p0=10&p1=%5B%5D 在 REGEX_STRING_REGEXP (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:80:12) 在 Scope.$get.Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:14003:19) 在 Scope.$get.Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:14227:24) 完成后（http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:9493:47） 在 completeRequest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:9678:7) 在 XMLHttpRequest.requestLoaded (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:9621:9) angular.js:11358 未捕获的错误：[$rootScope:infdig] 达到 10 个 $digest() 迭代。中止！ 在最后 5 次迭代中触发的观察者：[] http://errors.angularjs.org/1.3.0/$rootScope/infdig?p0=10&p1=%5B%5D

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

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

$应用：函数（表达式） 尝试 beginPhase('$apply'); 返回 this.$eval(expr); 抓住 (e) $exceptionHandler(e); 最后 清除相位（）； 尝试 $rootScope.$digest(); 抓住 (e) $exceptionHandler(e); 扔 e; ,

而expr 包含以下字符串：

功能 （） element.data('$injector', 注射器); 编译（元素）（范围）；

谁能比我更有经验 angular.js 向我解释发生了什么？

请不要告诉我使用django-angular或来使用angular.js的正常流程提交。我只会在万不得已的情况下检查这些解决方案。正如我之前所说，当出现 no 错误时，表单提交时没有问题，我只有在 POST 返回错误时才会出现这种行为。

TIA

【问题讨论】：

你在谷歌上搜索过error吗？

当然——正如我所说的，大多数人都说这是看表情的问题。然而这不是我的情况。

然后可以提供一些关于您的表单和手表的见解吗？

问题是我相信 Angular 在从 django 检索 POST 响应时表现不佳。为什么会发生这种情况？

【参考方案1】：

其实我解决了：

在我的表单的__init__ 方法中，我有self.helper.form_action ='#' 以便使angular.js 发布表单（如果您将操作留空，则角度想使用ajax 处理表单）。当我将其更改为 self.helper.form_action ='.' 时，它起作用了！