angular 2/5 获取动态表单的值

Question

我试图获取一个表单的值，该表单包含来自数据库的动态数量的资源，每个资源我想影响 3 个参数 C、I 和 A 的值，但表单组始终返回的值最后一个资源

想要的返回对象例如：

dataToSubmit = {

recource1：{ c:1, 我：2， 一个：3， },

recource2：{ c:0, 我：2， 一个：1， },

recource3：{ c:3, 我：0， 一个：1， }

}

这是我尝试的html代码

<mat-vertical-stepper *ngIf=" anything == true" [linear]="isLinear" #stepper>
    <form [formGroup]="cia" name="ciaform">
        <mat-step  *ngFor="let resource of resourcesarray" >
            <ng-template matStepLabel>{{ resource }}</ng-template>


            <h2>c</h2>
            <mat-select  formControlName="c" placeholder="score" >
                <mat-option [value]="0">
              0 (not classified)
            </mat-option>
                <mat-option [value]="1">
              1
            </mat-option>
                <mat-option [value]="2">
              2
            </mat-option>
                <mat-option [value]="3">
              3
            </mat-option>
            </mat-select>


            <h2>I</h2>
            <mat-select formControlName="i" placeholder="score" >
                <mat-option [value]="0">
                  0 (not classified)
                </mat-option>
                <mat-option [value]="1">
                  1
                </mat-option>
                <mat-option [value]="2">
                  2
                </mat-option>
                <mat-option [value]="3">
                  3
                </mat-option>
            </mat-select>


            <h2>A</h2>
            <mat-select formControlName="a" placeholder="score" >
                <mat-option [value]="0">
                      0 (not classified)
                    </mat-option>
                <mat-option [value]="1">
                      1
                    </mat-option>
                <mat-option [value]="2">
                      2
                    </mat-option>
                <mat-option [value]="3">
                      3
                    </mat-option>
            </mat-select>
            <button *ngIf="resourcesarray.indexOf(resource) !=0" mat-button matStepperPrevious>Back</button>
            <button mat-button matStepperNext >Next</button>
        </form>
    </mat-step>
    <mat-step>
        <ng-template matStepLabel>Done</ng-template>
        You are now done.

        <div>
            <button mat-button matStepperPrevious>Back</button>
            <button mat-button (click)="stepper.reset()">Reset</button>
            <button mat-button (click)="onSubmit()">Submit</button>
        </div>
    </mat-step>
</mat-vertical-stepper>

目前cia变量的返回值为{ c: 1 , i: 2 , a: 3 }

Answer 1

看起来您需要为您的 formControlName 属性设置一个唯一名称，因此例如，如果资源对象具有 name 属性，则可以使用 [formControlName]="resource.name" 而不是“c”。