Question

我正在创建像这样结构化的嵌套表单数组

我像这样构建我的formBuilder：

  initFormGeneral() {
    return this.generalForm = this.formBuilder.group({
      accompanyingSheet: [this.data ? this.data.accompanyingSheet : ''],
      airCirculation: [this.data ? this.data.airCirculation : ''],
      airRenewalRate: [this.data ? this.data.airRenewalRate : ''],
      area: this.buildArea(this.data ? this.data.area : []),
    });
  }

    buildArea(data) {
    return this.formBuilder.group({
      id: [data ? data.id : ''],
      localActivity: [data ? data.localActivity : ''],
      usualUse: [data ? data.usualUse : ''],
      mpcas:
        [
          this.formBuilder.array([
            this.formBuilder.group({
              id: [''],
              name: [''],
            })
          ]),
        ]
    });
  }

所以我在formGroupName中有一个formArrayName，因为＆＃39; area＆＃39;是一个对象，mpcas是一组对象。

然后，我写了我的HTML：

 <div formGroupName="area">
                <ion-row>
                  <ion-col>
                    <ion-item>
                      <ion-label>
                         Local Activity
                      </ion-label>
                      <ion-select formControlName="localActivity">
                        <ion-option *ngFor="let type of localActivityList; let i = index" value="{{type.name}}">{{type.name}}
                        </ion-option>
                      </ion-select>
                    </ion-item>

                  </ion-col>
                  <ion-col>
                    <ion-item>
                      <ion-label>
                       Usual Use
                      </ion-label>
                      <ion-select formControlName="usualUse">
                        <ion-option *ngFor="let type of usualUseList; let i = index" value="{{type.name}}">{{type.name}}
                        </ion-option>
                      </ion-select>
                    </ion-item>

                  </ion-col>
                </ion-row>
                 <ion-row> 
                  <div formArrayName="mpcas">
                    <div *ngFor="let mpca of area.controls.mpcas.controls; let i=index">
                      <div  [formGroupName]="i">
                        <ion-col>
                          <ion-item>
                            <ion-label>
                             MPCAS
                            </ion-label>
                            <ion-select formControlName="name">
                              <ion-option *ngFor="let type of mpcasList;" value="{{type.name}}">{{type.name}}
                              </ion-option>
                            </ion-select>
                          </ion-item>
                        </ion-col>
                      </div>
                    </div>
                  </div>
                </ion-row>
             </div>

但我Cannot read property 'controls' of undefined是一个错误。我试图在控制台上获得mpcas的控件：

console.log(this.generalForm.get('area').get('mpcas'));

并且没有控制权。怎么可能？

如何解决此问题？

formGroupName angular中的formArrayName

0 个答案: