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