Angular "formGroup expects a FormGroup instance. Please pass one in." error-CodePudding

I created a form using angular reactiveforms. I printed default data to my form and this data is coming, but when I look at the console part, "formGroup expects a FormGroup instance. Please pass one in." error, what is the solution to this?

Html Code;

  <form [formGroup]="sampleInfoFormGroup">
            <div >
              <div >
                <mat-form-field appearance="fill">
                  <mat-label >{{'OrderNo' | translate}}</mat-label>
                  <input formControlName="workOrderName" matInput readonly >
                </mat-form-field>
              </div>

              <div >
                <mat-form-field appearance="fill">
                  <mat-label >{{'Fabric' | translate}}</mat-label>
                  <input matInput formControlName="fabric" readonly >
                </mat-form-field>
              </div>

              <div >
                <mat-form-field appearance="fill">
                  <mat-label >{{'Customer' | translate}}</mat-label>
                  <input matInput formControlName="customer" readonly >
                </mat-form-field>
              </div>
            </div>
            <mat-divider></mat-divider>

            <div >

              <div >
                <mat-form-field appearance="fill">
                  <mat-label >{{'ModelName' | translate}}</mat-label>
                  <input matInput formControlName="workOrderModelName" readonly  >
                </mat-form-field>
              </div>

              <div >
                <mat-form-field appearance="outline">
                  <mat-label >{{'RollNumber' | translate}}</mat-label>
                  <input matInput formControlName="rollName">
                </mat-form-field>
              </div>

              <div >
                <mat-form-field appearance="outline">
                  <mat-label >{{'50*50(LISTED)' | translate}}</mat-label>
                  <input matInput formControlName="testFabricList">
                </mat-form-field>
              </div>
            </div>

Ts Code ;

 createSampleInfoForm() {
    console.log(this.sampleTable)
      this.sampleInfoFormGroup = this.formBuilder.group({
        workOrderName: [this.sampleTable.workOrderName],
        fabric: [""],
        customer: [""],
        workOrderModelName: [this.sampleTable.workOrderModelName],
        rollName: [this.sampleTable.rollName],
        testFabricList: [this.sampleTable.testFabricList],
        workShopName: [this.sampleTable.workShopName],
        testFabricSample: [this.sampleTable.testFabricSample],
        kID: [this.sampleTable.KID],
        sewingReason: [this.sampleTable.sewingReason],
        moldName: [this.sampleTable.moldName],
        explanation: [this.sampleTable.explanation],
        washingArrivalDate: [this.sampleTable.washingArrivalDate],
        washingDepartureDate: [this.sampleTable.washingDepartureDate],
      });
 
  }

  getSampleTableById(id: number) {
    this.sampleTableService.getSampleTableById(id).subscribe(data => {
      if (data) {
        this.sampleTable = data;
        this.createSampleInfoForm();
      }
    })

  }

I tried to create the form with formcontrol instead of formgroup but it didn't work

CodePudding user response：

Your FormGroup is created once the async call completed. In the meantime your formgroup is not defined, which causes the error. Add an ngIf like that

<form *ngIf="sampleInfoFormGroup" [formGroup]="sampleInfoFormGroup">