30280

onsubmit return all the rows input values angular 2

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:

<strong>Template</strong>

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

<strong>Component</strong>

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

Answer1:

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.

Recommend

  • Trigger event from frontend in magento
  • Reshape Data partially from Wide to Long in R [duplicate]
  • Reactjs onFocus/onBlur hide/show element
  • Using jquery ajax json format, How do you output a query from a .cfm page to the calling html page?
  • width of column in rich:datatable
  • displaying space padded records in asp.net gridview
  • How can I refresh the entire table sorting cache after dynamic table update?
  • applying background to first, and every third row in a dynamically generated table
  • dynamically set table titles with jquery's Datatables plugin - get titles from data object
  • OpenMP for dependent variables
  • Can't send file with ajax to php file
  • regex, multiline extract in R
  • Xcode launch app error in Mac 10.9 Mavericks
  • How to browse android SDK sources in Android studio 2.0
  • XBee Linux Serial Port on Rasberry Pi
  • Arduino making decision according to a packet received from serial port
  • garbled css name when styling within UiBinder
  • How to open html table in xls on click of a button
  • Google Maps api v3 get start and end coordinates of a street
  • Should I or shouldn't I use the CachingConnectionFactory with hornetq 2.4.1
  • Swift: Switch statement fallthrough behavior
  • How to test if a URL from an Eclipse bundle is a directory?
  • Read a local file using javascript
  • Illegal mix of collations for operation for date/time comparison
  • Counter field in MS Access, how to generate?
  • Javascript + PHP Encryption with pidCrypt
  • Release, debug version and Authorization Google?
  • Websockets service method fails during R startup
  • Unanticipated behavior
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • Why can't I rebase on to an ancestor of source changesets if on a different branch?
  • Hits per day in Google Big Query
  • How do I configure my settings file to work with unit tests?
  • How to stop GridView from loading again when I press back button?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Binding checkboxes to object values in AngularJs