Angular 4 Load Data Service for Form throws ExpressionChangedAfterItHasBeenCheckedError - forms

Question

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 ExpressionChangedAfterItHasBeenCheckedError. How can I fix the problem? At the moment I'm a bit baffled.
Form:
<form #Form="ngForm" [formGroup]="formGroup">
<div formArrayName="formArray">
<div *ngFor="let temp of data,let i=index">
<label [for]="i">
<input [name]="i" type="radio" [formControlName]="i" [(ngModel)]="selection" [value]="temp"/>
{{temp.name}}
</label>
</div>
</div>
<buttontype="button" (click)="goToPrevious(Form)">Back</button>
<button mat-raised-button type="button" [disabled]="!formGroup.valid"
(click)="goToNext(Form)">Next
</button>
</form>
Component:
this.formGroup = new FormGroup({
formArray: this.formArray = new FormArray([])
});
this.commonService.getData().subscribe(data => {
this.data= data;
this.createForm();
}
);
createForm() {
for (let i = 0; i < this.data.length; i++) {
this.formArray.push(new FormControl('', [Validators.required]))
}
}

Answer 1

You can show the view only when all data is fetched using boolean flag, it should prevent the error, like this:
<form #Form="ngForm" [formGroup]="formGroup" *ngIf="readyToShow">
And in component:
readyToShow = false;
createForm() {
for (let i = 0; i < this.data.length; i++) {
this.formArray.push(new FormControl('', [Validators.required]))
}
this.readyToShow = true;
}