onsubmit返回所有行的输入值，角度2 [英] onsubmit return all the rows input values angular 2

问题描述

我是角度2的新手。我有一张桌子，单击添加寄售选项后，它会添加一个新行，其中包含序列号和多个输入插槽。现在，添加更多的货物（在表中的多个输入槽中添加更多的行），并向所有这些行输入信息并提交，仅返回最后一行的值。有人可以告诉我如何将表中所有多个输入行的值作为单个对象返回吗？谢谢。

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.

下面是我的代码：

模板

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

}

推荐答案

因为您的 consignmentDetailsForm 仅拥有单个行的控件，并且所有行都引用彼此相同的控件实例。

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.

您需要使用 FormBuilder 为要在表中显示的行创建尽可能多的控件，然后从HTML引用特定行的控件。

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.

这篇关于onsubmit返回所有行的输入值，角度2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！