Formly Repeat Section: ExpressionChangedAfterItHasBeenCheckedError

[KingDarBoja]

Description
When using the repeat section based on the official documentation, everytime a new item is added to the fieldArray, the following error shows up in the console:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-valid: true'. Current value: 'ng-valid: false'.

Also notice how the save button is not disabled when the error is there and even if there are required fields to be filled.

Minimal Reproduction

Simplified version of my stackblitz (had a dialog but Beeman got rid of it).
https://stackblitz.com/edit/angular-formly-material-with-arrays-dfspvx?

Your Environment

• Angular version: 12.0.0 (Happened with 11..2.0 in my repo as well).
• Formly version: 5.10.19

[KingDarBoja]

Based on angular/angular#23657, I have done something similar by calling this.cdRef.detectChanges() after calling the built-in add() method, as follows:

export class RepeatTypeComponent extends FieldArrayType {
  constructor(private readonly cdRef: ChangeDetectorRef) {
    super();
  }

  addEntry(
    i?: number,
    initialModel?: any,
    { markAsDirty } = { markAsDirty: true }
  ) {
    this.add(i, initialModel, { markAsDirty });
    this.cdRef.detectChanges();
  }
}

Now notice in the stackblitz that such code block will actually vanish the error and also make the save button stay disabled after adding a new entry to the fieldArray.

[aitboudad]

This issue has been fixed and released as part of v5.10.20 release.

Please let us know, in case you are still encountering a similar issue/problem.
Thank you!

[KingDarBoja]

No problem, updated my stackblitz and it is working without the workaround, outstanding fix 🥇

[angularteam402]

I am using angular 7 and facing same issue. Do i need to update my angular version and ngx-formly version to resolve the issue?

angular cli - 7
ngx-formly - 5.5.11

[aitboudad]

@angularteam402 it depends on the root cause, give it a try else create a new issue with a reproduction example.