Попытка понять и решить ExpressionChangedAfterItHasBeenCheckedError в Реактивной форме

Question

Я относительно новичок в Angular и в особенности в Reactive Forms, поэтому я немного растерялся относительно того, почему я получаю ExpressionChangedAfterItHasBeenCheckedError в простой форме.

Пожалуйста, обратитесь кэтот StackBlitz

Я понимаю идею исключения, но не то, что я делаю неправильно, чтобы вызвать его, и как решить эту проблему.

Заранее спасибо за любую помощь!

Answer 1

Самое простое решение было бы обновить ngAfterViewInit, чтобы поставить в отдельную задачу:

ngAfterViewInit() {
  Promise.resolve(null).then(() => {
    this.loadCurrentClient();
    this.clientUpdateSubscription = this.formGroup.valueChanges.subscribe(newVal => {
      this.updateClient();
    });
  });
}

https://stackblitz.com/edit/angular-xmhd9z?file=src/app/client-general.component.ts

Но в идеальном случае лучше изменить дизайн.Например, вы можете избавиться от отдельных currentClient и формы.Оставьте только форму и делайте все что нужно с ее значениями в методе ngSubmit().

Answer 2

Изменить ClientGeneralComponent ngAfterViewInit(), например:

import { ChangeDetectorRef } from '@angular/core';

constructor(private fb: FormBuilder,private cd: ChangeDetectorRef) {  }


ngAfterViewInit() {
    this.loadCurrentClient();

     this.clientUpdateSubscription = this.formGroup.valueChanges.subscribe(newVal => {
        this.updateClient();
     });
     this.cd.detectChanges();
}

Рабочая демонстрация

Чтобы глубже понять это прочитайте статью