Combining ngxs/forms with @ngxs/storage-plugin causes ExpressionChangedAfterItHasBeenCheckedError when ngxs swaps values on init

Viewed 25

When a page contains a form connected to the store via @ngxs/form-plugin and this store is cached using @ngxs/storage-plugin, I get ExpressionChangedAfterItHasBeenCheckedError if I use the angular form object in my template.

My guess is that it's caused by ngxs, as it swaps values right after the form has been initialized. It only happens when there's no cached form in the store yet, so there's no error the first time I open the page.

Here's what I have in the template:

<app-button
  class="ns-overlay-next-button"
  [disabled]="dugnadSettingsForm.invalid"
  (click)="goToPaymentDetails()"
>
  {{ 'economy.next' | translate }}
</app-button>

The error says ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'. and points here [disabled]="dugnadSettingsForm.invalid".

I am able to neutralize this issue by calling this.cdr.detectChanges() in ngOnInit after I init the form, but I wonder what would be the right way to do it and why didn't ngxs think that through.

0 Answers
Related