Получить значения от повторяющегося управления в угловых 6

Question

Как получить значения из повторяющегося управления в угловых значениях 6

Я пытаюсь прочитать значение поля этой формы в файле TS, пожалуйста, помогите, как я могу это сделать

это повторяющийся блок, в котором вы можете нажать кнопку Добавить, и он создаст еще одну группу управления для этого

<div *ngIf="subTask.value==5 && subTask.value!=null" formArrayName="itemRows">
        <div *ngFor="let itemrow of taskfrm.controls.itemRows.controls; let i=index" [formGroupName]="i">
          <!-- Border START -->
          <div class="add-new-task-border">
            <mat-form-field class="example-full-width">
              <mat-select placeholder="Logical Oprater">
                <ng-container *ngFor="let relationaOpt of relationalOpraters">
                  <mat-option *ngIf="relationaOpt.operatorsType==='logical'" [value]="relationaOpt.id">
                    {{relationaOpt.operator}}
                  </mat-option>
                </ng-container>
              </mat-select>
            </mat-form-field>

            <mat-form-field class="two-way-banding">
              <mat-select placeholder="DataElement 1">
                <mat-option *ngFor="let dataElement of dataElementList" [value]="dataElement.dataElementID">
                  {{dataElement.dataElementName}}
                </mat-option>
              </mat-select>
            </mat-form-field>

            <mat-form-field class="two-way-banding eta-margin-two-way">
              <mat-select placeholder="Relational Oprater">
                <ng-container *ngFor="let relationaOpt of relationalOpraters">
                  <mat-option *ngIf="relationaOpt.operatorsType==='relational'" [value]="relationaOpt.id">
                    {{relationaOpt.operator}}
                  </mat-option>
                </ng-container>
              </mat-select>
            </mat-form-field>
            <mat-form-field class="two-way-banding">
              <mat-select placeholder="DataElement 2">
                <mat-option *ngFor="let dataElement of dataElementList" [value]="dataElement.dataElementID">
                  {{dataElement.dataElementName}}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </div>
          <!-- Border END -->
        </div>
      </div>
      <button *ngIf="subTask.value==5 && subTask.value!=null" style="float:right;" type="button" mat-icon-button color="primary"
        (click)="addNewRow()">
        <mat-icon>add_circle</mat-icon>
      </button>
      <button *ngIf="subTask.value==5 && subTask.value!=null" style="float:right;" type="button" mat-icon-button color="primary"
        (click)="addNewRow()">
        <mat-icon>remove_circle</mat-icon>
      </button>

если у вас есть идеи по этому поводу, пожалуйста, скажите мне

Answer 1

Вам нужно сохранить индекс в массиве форм:

form.controls.itemRows.controls[i].controls.name.value

HTML:

<div *ngIf="subTask.value==5 && subTask.value!=null" formArrayName="itemRows">
<div *ngFor="let itemrow of taskfrm.controls.itemRows.controls; let i=index" [formGroupName]="i">

    <mat-form-field class="col-md-4">
        <input matInput maxlength="20" 
          formControlName="name">
    </mat-form-field>
</div>