html Angular“formGroup需要FormGroup示例,请传入一个示例,”错误

lmvvr0a8  于 2022-12-09  发布在  Angular
关注(0)|答案(1)|浏览(154)

我创建了一个使用角型reactiveforms的表单。我打印了默认数据到我的表单,这些数据即将到来,但是当我查看控制台部分时,“formGroup需要一个FormGroup示例。请传递一个进来。”错误,对此有什么解决方案?
Html代码;

<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代码;

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

  }

我尝试使用formcontrol而不是formgroup创建窗体,但没有成功

4ngedf3f

4ngedf3f1#

一旦async调用完成,就会创建表单组。同时,未定义表单组,这会导致错误。添加如下ngIf

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

相关问题