Calling setValidators on a form control when control is nested as a component in form causes ExpressionChangedAfterItHasBeenCheckedError

[rmanuel200]

I'm submitting a ...

[ ] Regression (behavior that used to work and stopped working in a new release)
[ X] Bug report 
[ ] 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

Current behavior

Calling setValidators on a form control when control is nested as a component in form causes ExpressionChangedAfterItHasBeenCheckedError. Otherwise nesting formControls in components seems to work fine.

Expected behavior

When calling myform.controls["my_control"].setValidators([Validators.required]); in a nested component of a reactive form I would expect no errors to occur, especially ExpressionChangedAfterItHasBeenCheckedError

Minimal reproduction of the problem with instructions

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

Please tell us about your environment

Angular version: ~4.2.0

Still an issue

Browser:
- [ X] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 6.11.0 
- Platform: linux

Others:

[Toxicable]

Can you make a minimal reproduction to show your issue? Here's a plunkr to get your stared: https://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5

[rmanuel200]

It turns out this is happening for one nested form component where it wasn't happening before nesting. For instance I'm passing in the formGroup via an input. What's special about this component is that is makes use of ngDefaultControl [(ngModel)]="rE.formattedDate" and when I set [Validators.required] in the parent form and change the input value the feedback loop starts. For now I've found a temporary fix by putting *ngIf="true" on the nested component which contains the component using ngDefaultControl and I can still use the validators. I think it's interesting this worked when not nested. I wonder if I should rewrite the component to not use ngDefaultControl [(ngModel)] or if this is even a bug. BTW this seems to complicated to put in a plunker but I'll take a look to see if that's feasible.

[BioPhoton]

Hi @rmanuel200
I was not able to get the point. But i just read #18748 and tried your *ngIf workaround. It solves the problem in #18748
I bet you have the same problem!! Try move the html where you use the *ngIf under the ngModel dir.

Please let me know if my my assumption is the case!

best,
Michael

[renehamburger]

We're experiencing a related issue: ExpressionChangedAfterItHasBeenCheckedError is always thrown for a very simple reactive form, if the input is on a lower template hierarchy level (defined by *ngFor/*ngIf etc) than the code accessing the form's validity:

<form [name]="formName"
      [formGroup]="formGroup">
  <div *ngIf="true">
    <input formControlName="name"
           required
           placeholder="Please enter you name">
  </div>
</form>
<div *ngIf="formGroup.valid">
  Name is required.
</div>

Here's a working plunkr.

The reason for the error being thrown is that change detection evaluates the *ngIf of the error div first before it evaluates the input's validity, as the input is one level lower in terms of template hierarchy.

The workaround is to bring the error div onto the same level as the input by adding just another <div *ngIf="true"></div> around it (as mentioned above).

[rmanuel200]

I was able to trigger the ExpressionChangedAfterItHasBeenCheckedError with form validators error in this plunker using a simpler example with a mutable object:

https://plnkr.co/edit/MtAvKgSnudA1Lk7WEVL2?p=preview.

We are passing in [formGroup] through inputs on many forms and this problem wasn't happening prior. Please inform if this is something that's fixable.

[sairamponugoti]

I am facing the same issue with the nested form components.
Please let me know if their is any updates on this issue.

[theactiveactor]

Facing same issue. Here's a very simple repro that only uses nested reactive form and ng-if.
https://plnkr.co/edit/GrvjN3sJ05RSNXiSY8lo

[jasonzhang2022]

Also reproduced: https://plnkr.co/edit/lODxTJN8qy4s5YaC1JZD?p=preview

[jasonzhang2022]

In my case, I can't try *ngIf.

1. I want to define a template reference variable for the component in ngIf.
2. I am creating a component library. I can't ask the library user to add *ngIf="true" statement in their template.

[jasonzhang2022]

Work around my issue like this
Promise.resolve().then(()=>{
this.control.setValidators(this.buildValidators());
this.control.updateValueAndValidity();
});