angular - onsubmit すべての行の入力値を返します angular 2

Question

私はangular 2を初めて使用します。「委託品の追加」オプションをクリックすると、シリアル番号と複数の入力スロットを含む新しい行が追加されるテーブルがあります。委託品をさらに追加し (テーブルに複数の入力スロットの行を追加します)、これらすべての行に情報を入力して送信すると、最後の行の値のみが返されます。テーブルから複数の入力行すべての値を 1 つのオブジェクトとして返す方法を教えてください。ありがとうございました。

以下は私のコードです：

テンプレート

<h4>Consignment Details
    <a style="float:right" (click)="onClickAddConsignment()">
    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 
    <span>Add Consignment</span>
    </a>
</h4>
<form [ngFormModel]="consignmentDetailsForm" (ngSubmit)="onClickSave(consignmentDetailsForm.value)">
<table class="grid"  cellpadding="4">
    <thead>
        <tr>
            <th>Serial No.</th>
            <th>Consignment ID</th>
            <th>Consignment Type</th>
            <th>Source</th>
            <th>Destination</th>
            <th>Pickup Date</th>
            <th>Delivery Date</th>
            <th>Documents</th>
        </tr>
    </thead>
    <tbody *ngFor="let consignmentSerialNumber of newConsignment; let i=index">
<tr>
    <td>
        <input type="text" class="form-control" style="display: none" ngControl="serialNumber" ngModel={{consignmentSerialNumber}}>
        {{consignmentSerialNumber}}
    </td>
    <td><input type="text" class="form-control" ngControl="consignmentID"></td>
    <td><input type="text" class="form-control" ngControl="consignmentType"></td>
    <td><input type="text" class="form-control" ngControl="consignmentSource"></td>
    <td><input type="text" class="form-control" ngControl="consignmentDestination"></td>
    <td><input type="date" class="form-control" ngControl="pickupDate"></td>
    <td><input type="date" class="form-control" ngControl="deliveryDate"></td>
    <td>
        <label class="btn btn-primary" for="uploadConsignmentDocument">Select Document</label>
        <input type="file" id="uploadConsignmentDocument" style="display: none" 
        (change)='onSelectDocument($event)' (click)='onSelectDocumentIndex(i)' multiple>
        <input type="text" class="form-control" style="display: none" [(ngModel)]="fileList[i]" ngControl="document" multiple>
    </td>
    <td>
        <a (click)="removeConsignment(consignmentSerialNumber)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
    </td>
</tr>
    </tbody>
</table>


<br>
<div class="row">
<div class="col-md-4">
<button type="submit" class="btn btn-primary"  >Save</button> <button class="btn btn-primary">Cancel</button>
</div>
 </div>
</form>

成分

import {Component, OnInit, OnChanges} from '@angular/core';
import { FORM_DIRECTIVES, FormBuilder, ControlGroup, Control } from '@angular/common';

@Component({
    selector: 'plan-trip',
    templateUrl: 'app/dashboard/features/tripPlanner/planTrip/planTripTemplate.html',
    directives: [FORM_DIRECTIVES]
})

export class PlanTripComponent implements OnInit, OnChanges {


    newConsignment: any[]=[];
    serialNumberCounter: number = 1;
    consignmentDetailsForm: ControlGroup;
    fileList: any[]=[];
    fileIndex: any;

    constructor(private _formBuilder: FormBuilder) {


        this.consignmentDetailsForm = _formBuilder.group({
            'serialNumber': [],
            'consignmentID': [],
            'consignmentType': [],
            'consignmentSource': [],
            'consignmentDestination': [],
            'pickupDate': [],
            'deliveryDate': [],
            'document': []
        })
    }

    ngOnInit() {

    }

    ngOnChanges() {

    }


    onClickAddConsignment(){

        this.newConsignment.push(this.serialNumberCounter++);
    }

    onSelectDocumentIndex(index){
        console.log("index is:..", index)
        this.fileIndex = index;
    }

    onSelectDocument(event){

        this.fileList[this.fileIndex] = event.target.files;
        console.log("file: ", this.fileList);

    }


    removeConsignment(consignment: any){
        console.log("delete consignment:..", consignment)

        var index = this.newConsignment.indexOf(consignment);
        this.newConsignment.splice(index, 1)
        console.log("total consignments in list:..to remove..", this.newConsignment)
    }

    onClickSave(consignmentDetailsForm : any[]){
        console.log("consignmentDetailsForm are:..", consignmentDetailsForm)
    }

}