title: Angular 4 Load Data Service for Form throws ExpressionChangedAfterItHasBeenCheckedError
body: <p>I'm getting data through an REST-API. With the help of this data I generate radio buttons for a form. As long as the form is not valid, the Submit-Button is disabled. Since retrieving the data takes a little time, the validity of the form changes. This throws an <code>ExpressionChangedAfterItHasBeenCheckedError</code>. How can I fix the problem? At the moment I'm a bit baffled.</p>
  
  <p>Form:</p>
  
  <pre><code>  &lt;form #Form="ngForm" [formGroup]="formGroup"&gt;
      &lt;div formArrayName="formArray"&gt;
        &lt;div *ngFor="let temp of data,let i=index"&gt;
          &lt;label [for]="i"&gt;
            &lt;input [name]="i" type="radio" [formControlName]="i" [(ngModel)]="selection" [value]="temp"/&gt;
            {{temp.name}}
          &lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;buttontype="button" (click)="goToPrevious(Form)"&gt;Back&lt;/button&gt;
      &lt;button mat-raised-button type="button" [disabled]="!formGroup.valid"
              (click)="goToNext(Form)"&gt;Next
      &lt;/button&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code> this.formGroup = new FormGroup({
        formArray:  this.formArray = new FormArray([])
      });
  
      this.commonService.getData().subscribe(data =&gt; {
          this.data= data;
          this.createForm();
        }
      );
  
   createForm() {
      for (let i = 0; i &lt; this.data.length; i++) {
        this.formArray.push(new FormControl('', [Validators.required]))
      }
    }
  </code></pre>