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

Question

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 class="row">
              <div class="col-md-4">
                <mat-form-field appearance="fill">
                  <mat-label class="text-dark">{{'OrderNo' | translate}}</mat-label>
                  <input formControlName="workOrderName" matInput readonly >
                </mat-form-field>
              </div>

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

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

            <div class="row mt-2">

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

              <div class="col-md-4">
                <mat-form-field appearance="outline">
                  <mat-label class="text-dark">{{'RollNumber' | translate}}</mat-label>
                  <input matInput formControlName="rollName">
                </mat-form-field>
              </div>

              <div class="col-md-4">
                <mat-form-field appearance="outline">
                  <mat-label class="text-dark">{{'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

Answer 1

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">