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>

从角度6中的重复控制获取值

1 个答案: