Angular反应形式-提交二维数组形式

时间:2020-07-06 11:44:45

标签: angular typescript angular-forms

我正在使用Angular 9。

我有以下内容:

approval-edit.component.html

<mat-card class="approval-edit-card-nominated">
    Nominated Evaluators
    <div>
        <form class="approval-edit-form" (ngSubmit)="onSubmit(approvalEditForm)" #approvalEditForm="ngForm">
            <table *ngIf='nominationAllOf'>    
                <tr *ngFor="let nomination of nominationAllOf; let i = index">
                    <div *ngIf='i > 0'>&nbsp;&nbsp;and</div>
                    <div class='nomination-row' *ngIf='nomination'>
                        <td *ngFor="let item of nomination.nominations; let j = index">
                            <div class="nomination-wrapper">
                                <div class="nomination-or" *ngIf='j > 0'>or&nbsp;&nbsp;</div>
                                <div class="nomination-evaluator">
                                    <div class="example-full-width">
                                        <input name="UserName{{i}}{{j}}" id='userName{{i}}{{j}}' type="text" matInput value='{{item.evaluatorInfo.personalInfo.name.firstName}}&nbsp;{{item.evaluatorInfo.personalInfo.name.lastName}}'>
                                    </div>      
                                </div>
                            </div>                      
                        </td>
                    </div>
                </tr>
            </table>
            <button *ngIf='nominationAllOf' mat-raised-button>Update</button>
        </form>
    </div>
</mat-card>

approval-edit.component.ts

  public nominationAllOf: NominationAllOf[];


      public onSubmit(formValue: NgForm): void {
        console.log(formValue);
      }

如您所见,我有一个nominationAllOf对象,该对象进行了迭代并填充了input项目。这将按预期显示。

enter image description here

我正在通过二维数组(NominationAllOf[])填充列表。

nomination-allof.ts

export interface NominationAllOf {
    nominations: NominationAnyOf[];
} 

问题

我可以使用“更新”按钮来调用onSubmit函数,但是我不确定如何提取input值。我希望他们填充更新的NominationAllOf[]对象。

问题

在调用onSubmit函数时,如何为每个项目传递input值?

我尝试使用formGroup,但是由于NominationAllOf[]并不简单,我不确定。因此,只要使用JavaScript提交更新的NominationAllOf[],只要我可以使用它来填充更新的<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script> ,提交的对象就无关紧要。

0 个答案:

没有答案
相关问题