Question

我试图获取一个表单的值，其中包含来自数据库的每个资源的动态数量资源，我希望影响3个参数C，I和A的值，但表单组总是返回值最后一个资源

所需的返回对象例如：

dataToSubmit = {

recource1：{ C：1， I：2，答：3， }，

recource2：{ C：0， I：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属性而不是“c”，你可以使用[formControlName] =“resource.name”。 / p>

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

1 个答案: