表单的Angular 4加载数据服务引发ExpressionChangedAfterItHaHasBeenCheckedError

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;
}