Angular 9 Как вернуть только одно имя элемента управления формы выпадающего списка для каждого индекса массива? - PullRequest
Новая
       20

Angular 9 Как вернуть только одно имя элемента управления формы выпадающего списка для каждого индекса массива?

1 голос
/ 30 марта 2020

Основываясь на ответе о переполнении стека о создании 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) перенастраивает следующее при нажатии:

enter image description here

И это изображение показывает, что только для одного индекса имеется 16 выпадающих списков, а последнее значение fg.ccontrols, содержащее консоль, содержит 18 массивов.

enter image description here

Я сделал stackblitz только с кодом в нем.

1 Ответ

1 голос
/ 30 марта 2020

Я не думаю, что вам нужно использовать массив реагирующих форм, просто formGroup может работать для вас, генерируя базу formGroup из dataIndexes значения

компонента 

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>

демо ?

...