Question

我是角色2的新手。我有一个表，点击'添加寄售'选项，它会添加一个带序列号和多个输入槽的新行。现在，在添加更多托运（在表中添加更多行的多个输入槽），并向所有这些行输入信息并提交时，仅返回最后一行的值。有人可以告诉我如何将表中所有多个输入行的值作为单个对象返回？谢谢。

以下是我的代码：

模板

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

}

Answer 1

因为consignmentDetailsForm只有一行控件，所有行都引用与每一行相同的控件实例。

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

onsubmit返回所有行输入值angular 2

1 个答案: