onsubmit return all the rows input values angular

Question

I'm new to angular 2. I have a table, which on click of 'add consignment' option, it adds a new row with serial number and multiple input slots. Now on adding more consignments (which adds more rows of multiple input slots in table), and entering information to all these rows and submitting, only the values of last row is being returned. Can someone please tell me how to return the values of all the multiple input rows from the table as one single object? Thank you.

Below is my code:

Template

<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>

Component

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)
    }

}

Answer 1

Because your consignmentDetailsForm only has the controls for a single row and all your rows refer to the same control instance as each other row.

You need to use the FormBuilder to create the controls for as many rows as you are going to display in your table and then refer to the control of a specific row from your HTML.