Django with angular.js form submission not working when form has errors

Question

I am trying to add some angular.js stuff in a normal django form (I am actually using django-crispy-forms). I am submitting the form normally through a POST request and not using angular (I am just using angular for some controls I need on that form).

The form is actually working when it is submitted without errors: It is posted normally and I am redirected to the success page. However, if there are errors in the form (f.e missing fields) I am getting a flash of the response (I see which fields are missing with {{ form.errors }} but after some time (<1 second) I am getting the following output in console:

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 

and the page is reloaded through a GET request. So I losing all my changes and error messages.

Now, I know that the mentioned exception most of the times is related to watching expressions. However this is not true in my case since I've checked all my watch expressions and even disabled them completely. Also, I've added a pause on exception in google and noticed that this exception is thrown on the this.$eval(expr); of the following code:

$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;
          }
        }
      },

while expr contains the following string:

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

Can anybody -more experienced with angular.js than me- explain to me what's going on ?

Please don't tell me to use django-angular or to use the normal flow submission of angular.js. I will check these solutions only as a last resort. As I said before when there are no errors the form is submitted without problem and I only get this behavior when the POST returns with errors.

TIA

Answer 1

Actually I solved it:

In the __init__ method of my Form I had self.helper.form_action ='#' in order to make angular.js post the form (if you leave the action empty angular wants to handle the form using ajax). When I changed it to self.helper.form_action ='.' it worked!