Another if(!$scope.$$phase) $scope.$apply() szenario - need help for clearance

Question

I have an Angular form with dynamical many subforms. The first form won't get resetted after submit and the subforms will be resetted on every submit.

We can use this whole form more than once, if the user doesn't reload the page. So after validation and submit, I don't reset the first form, but let the user click it through again and he can add some additional subforms (if nothing changes).

The validation only appears if the user clicks on submit, so the scope variable subFormSubmitted gets true and the required error is still true. e.g.

subForm.salutation.$error.required && subFormSubmitted

On first pageload - everything works fine. When I try to submit the subform, without entering something, the required validation gets shown.

The problem is, after he submitted the form the first time, and he doesn't change anything in the first form and he gets to the dynamical forms the second time, and just click on submit, without entering something, the model doesn't get updated and no validation is shown, although the scope variables has the right value. The variables

subForm.salutation.$error.required && subFormSubmitted

evaluates to true when I check it in the webdeveloper. However, when I focus an input and type something in, the required validation immediately appears on the other inputs. Also, when I change something in the first form - and then enter the subforms, the validation shows correctly when I press submit.

So I thought, that could be a problem with applying the scope.

What I did after some try and errors, I got a solution that works:

I added

if (!$scope.$$phase) {
    $scope.$digest();
}

to the scope function that gets called when I press submit.

This works fine, but after some research, I found out that this is an anti pattern: Why is using if(!$scope.$$phase) $scope.$apply() an anti-pattern?

So, can someone help me and tell me what's the "right" way to solve this problem?

Basically I controll the visibility of the forms with ng-show=firstFormSubmitted.

$scope.addSubForm = function() {
            $scope.firstFormSubmitted = true;

I hope you could understand my problem, sorry for the bad english

Answer 1

$scope.$apply and $scope.$digest are meant be executed in callbacks that run asynchronously (after the initial digest cycle): AJAX requests, setTimeout/setInterval/setImmediate, non-$q promises, DOM event listeners, etc.

It is Angular's job as a framework to do it automatically in all asynchronous built-ins ($http, $timeout, directives), and it handles the job. Well mannered third-party extensions do the same thing.

The reason why !$scope.$$phase && $scope.$digest() can be considered an antipattern is that in well-shaped app the developer always knows if the code is performed on digest or not, thus this check is redundant. And if it's not, this is the indicator of some flaws in application design.