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

问题描述

我是 angular 2 的新手.我有一个表格，点击添加托运"选项后，它会添加一个带有序列号和多个输入槽的新行.现在添加更多货物(在表中添加更多行的多个输入槽)，并将信息输入到所有这些行并提交，只返回最后一行的值.有人可以告诉我如何将表中所有多个输入行的值作为一个对象返回吗?谢谢你.

下面是我的代码:

模板

寄售明细<a style="float:right" (click)="onClickAddConsignment()"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>添加托运</span></a>
<form [ngFormModel]="consignmentDetailsForm" (ngSubmit)="onClickSave(consignmentDetailsForm.value)"><头><tr><第>序列号</th><th>寄售ID</th><th>寄售类型</th><th>来源</th><th>目的地</th>;<第>个交货日期个<th>文档</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">选择文档</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>
取件日期
<br><div class="row"><div class="col-md-4"><button type="submit" class="btn btn-primary" >保存</button><button class="btn btn-primary">取消</button>

</表单>

组件

import {Component, OnInit, OnChanges} from '@angular/core';从@angular/common"导入 { FORM_DIRECTIVES, FormBuilder, ControlGroup, Control };@成分({选择器:'计划旅行'，templateUrl: 'app/dashboard/features/tripPlanner/planTrip/planTripTemplate.html',指令:[FORM_DIRECIVES]})导出类 PlanTripComponent 实现 OnInit、OnChanges {newConsignment: any[]=[];序列号计数器:数字 = 1；寄售明细表:控制组；文件列表:任何[]=[];文件索引:任何；构造函数(私有_formBuilder:FormBuilder){this.consignmentDetailsForm = _formBuilder.group({'序列号': []，'托运ID':[]，'寄售类型': [],'寄售来源':[]，'寄售目的地': [],'挑个日子': []，'邮寄日期': []，'文档': []})}ngOnInit() {}ngOnChanges() {}onClickAddConsignment(){this.newConsignment.push(this.serialNumberCounter++);}onSelectDocumentIndex(index){console.log("索引是:...", index)this.fileIndex = 索引；}onSelectDocument(事件){this.fileList[this.fileIndex] = event.target.files;console.log("文件:", this.fileList);}删除委托(委托:任何){console.log("删除寄售:..", 寄售)var index = this.newConsignment.indexOf(consignment);this.newConsignment.splice(index, 1)console.log("清单中的总货物:..要删除..", this.newConsignment)}onClickSave(consignmentDetailsForm : any[]){console.log("consignmentDetailsForm are:..", consignmentDetailsForm)}}

解决方案

因为您的 consignmentDetailsForm 只有一行的控件，并且您的所有行都与其他行引用相同的控件实例.

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

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

}

解决方案

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.

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