Angular 9 如何return 数组的每个索引只有一个下拉列表表单控件名称？

Question

基于关于为每个提取的数组索引生成formControlName，我做了以下操作：

假设我们有一个名为 odkDataIndexes 的索引数组，让我们说如下：

odkDataIndexes = ['id', 'name'];

所以我需要生成 2 个表单控件，每个控件都有相应的名称：

createIndexesForm(extractedIndexesArray): void {
  this.indexesForm = this.fb.group({
    mappingFieldItems: this.fb.array(
      extractedIndexesArray.map(values => {
        return this.fb.group(values);
      })
    )
  });
}

然后点击按钮，我需要生成表单控件：

async generateMappingFields() {
  this.showFields = false;
    if (this.odkDataIndexes.length > 0) {
      this.createIndexesForm(this.odkDataIndexes);
    }
  this.showFields = true;
}

在HTML这边我有以下内容：

<div *ngIf="showFields">
        <mat-spinner *ngIf="!indexesForm" value="50" class="setSpinnerOnTop" diameter="75" [color]="medair-color"></mat-spinner>
        <div [formGroup]="indexesForm" *ngIf="indexesForm">
            <div formArrayName="mappingFieldItems">
                <div *ngFor="let fg of indexesForm.get('mappingFieldItems').controls" [formGroup]="fg">
                    <ng-container *ngFor="let fc of fg.controls | keyvalue">
                        <!-- <input type="text" [formControl]="fc.value"> -->
                        <span></span>
                        <mat-form-field class="formFieldWidth" color="warn" appearance="fill">
                            <mat-label>{{fc.value | keyvalue}}</mat-label>
                            <mat-select [formControl]="fc.value">

                                <mat-option (click)="getName(fc.value, de.id, fg.controls)" *ngFor="let de of dataElementsDetails; let i = index;" [value]="de.id">
                                    {{de.code}}

                                </mat-option>
                            </mat-select>
                        </mat-form-field>
                    </ng-container>
                </div>
            </div>
        </div>
    </div>

现在对于 odkDataIndexes 中的每个索引，不是每个索引只显示一个下拉列表，而是根据所选数据显示 7 或 8 个。

getName(fc.value, de.id, fg.controls) 正在重新调整以下点击：

这张图显示，只有一个索引，有16个下拉列表，最后一个fg.ccontrols的consoled值包含18个数组。

我做了一个 stackblitz，里面只有代码。

Answer 1

我认为您不需要使用反应式表单数组，只需一个 formGroup 就可以为您工作，方法是生成 dataIndexes 值

的 formGroup 基数

分量

createIndexesForm(extractedIndexesArray: string[]): void {
    // ["id", "name"]   {id:null,name:null}
    const controls = extractedIndexesArray.reduce((g, k) => {
      g[k] = null;
      return g;
    }, {});

    this.indexesForm = this.fb.group({
      mappingFieldItems: this.fb.group(controls)
    });
  }

模板

<div [formGroup]="indexesForm" *ngIf="indexesForm">
    <div [formGroup]="indexesForm.get('mappingFieldItems')">
        <div *ngFor="let controlName of dataIndexes">
            <mat-form-field class="formFieldWidth" color="warn" appearance="fill">
                <mat-label>{{controlName}}</mat-label>
                <mat-select [formControlName]="controlName">
                    <mat-option *ngFor="let de of dataElementsDetails; let i = index;" 
                        [value]="de">
                        {{de}}
                    </mat-option>
                </mat-select>
            </mat-form-field>

        </div>
    </div>
</div>

demo

Angular 9 如何return 数组的每个索引只有一个下拉列表表单控件名称？

Angular 9 How to return only one drop down list form control name for each index of an array?

arrays

angular

angular-reactive-forms

formarray