minlength validator causes ExpressionChangedAfterItHasBeenCheckedError when its value is dynamically updated

[mavidulin]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

When an input field has a minlength validator directive and minlength value dynamically changes this causes ExpressionChangedAfterItHasBeenCheckedError when the field turns from valid to invalid, and vice-versa, and if you additionally check form validity with *ngIf above the input field. Strangely, when you check form validity below the field with *ngIf there is no error.

Expected behavior

There shouldn't be ExpressionChangedAfterItHasBeenCheckedError after minlenght validation returns a result and field changes state (valid/invalid).

Minimal reproduction of the problem with instructions

Here is a demo which demonstrates the problem and also cases where there is no problem. All the details are described in the demo.

What is the motivation / use case for changing the behavior?

It should be possible to dynamically change the value for validation without bumping into ExpressionChangedAfterItHasBeenCheckedError.

Environment

Angular version: 5.x


Browser:
- [x] Chrome (desktop)
- [x] Firefox
 

[AndrewKushnir]

Just tested this behavior with the latest versions of Angular packages (10.1.0) and Ivy enabled, the behavior is still the same (see repro here). The problem was caused by the fact that the value of the exampleForm.valid binding changes once customMinlength binding (which is an input to the CustomMinLengthValidator directive) is updated to a value that makes the form invalid. As a possible workaround, you can try moving the form validation status code into a separate view (into an <ng-template>), so the binding change check will happen independently:

<ng-container *ngTemplateOutlet="formStatus"></ng-container>
<ng-template #formStatus>
    <div class="text-success" *ngIf="exampleForm.valid">FORM IS VALID</div>
    <div class="text-danger" *ngIf="!exampleForm.valid">FORM IS INVALID</div>
</ng-template>