Angular 返回多个对象和两个窗体

我是新来的。上载两个或多个文档时，它将列在模板中。所列文档的每一行都有用于输入附加信息的输入槽。提交时，仅在文档列表最后一行中输入的值将作为对象返回。我希望返回文档列表中输入的所有行的值。下面是我的代码

模板

<h1 class="separator">Manage Documents</h1>
<!-- in transit -->
<div class="row">
<div class="col-xs-2">
<input type="file" id="uploadFile" style="display: none" (change)='onClickUploadDocument($event)' multiple>
<label for="uploadFile"  class="btn btn-primary">Upload Documents</label>

</div>

<div class="col-xs-6">
<input type="button" value="Select Truck To Send Document" class="btn btn-primary" data-toggle="modal" data-target="#selectTruck">
</div>
</div>


<table cellpadding="4" class="grid" >
<thead><tr><th>Document Name</th><th>Document ID</th><th>Document Type</th><th>Source</th>
<th>Document Date</th><th>Trip ID</th><th>Notes</th><th>Action</th></tr></thead>

<form [ngFormModel]="myform" (ngSubmit)="onSubmit(myform.value)">
<tbody *ngFor="let file of files">
    <tr > 
    <td class="form-group" >{{file.name}}</td>
    <td class="form-group"><input type="text" class="form-control"  ngControl="documentId" #documentId="ngForm"></td>
    <td class="form-group"><input type="text" class="form-control" ngControl="type" #type="ngForm"></td>
    <td class="form-group"><input type="text" class="form-control" ngControl="source" #source="ngForm"></td>
    <td class="form-group"><input type="date" class="form-control" ngControl="date" #date="ngForm"></td>
    <td class="form-group"><input type="text" class="form-control" ngControl="tripId" #tripId="ngForm"></td>
    <td class="form-group"><input type="text" class="form-control" ngControl="notes" #notes="ngForm"></td>
        <td class="form-group">
            <a (click)="remove(file)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a> 

        </td>
    </tr>

</tbody>

</table>
<!-- save button -->
<button type="submit" class="form-group" class="btn  btn-primary " >Save</button>
</form>

管理文档
上传文件
文档名称文档ID文档类型源
文档DateTrip IDNotesAction
{{file.name}
拯救

组件

 import {Component, OnInit, OnChanges} from '@angular/core';
    import {NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder } from '@angular/common';
    import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
    import {FleetService} from '../../fleet/fleetControlPanel/fleetControlPanelService';
    import {DocumentManagementService} from './documentManagementService';

    @Component({
        selector: 'documentManagement',
        templateUrl: 'app/dashboard/features/documents/documentManagement/documentManagementTemplate.html',
        directives: [ROUTER_DIRECTIVES, NgClass, FORM_DIRECTIVES ]
    })

    export class DocumentManagementComponent implements OnInit, OnChanges {

        myform: ControlGroup;
        file: any[];
        files: any[] = [];
        trucks: any[];
        errorMessage: any;
        checked: boolean ;

        // constructor to loop the products in product service file and disply in html
        constructor(private _fleetService: FleetService, private _documentManagementService: DocumentManagementService,
          _formBuilder:  FormBuilder){

            this.myform = _formBuilder.group({
                'documentId': [],
                'type': [],
                'source': [],
                'date': [],
                'tripId': [],
                'notes': []
            })
        }

        ngOnInit(): void {

        }

        ngOnChanges(): void {

        }

        onClickUploadDocument(event){
            console.log("clicked")
            let fileList: FileList = event.target.files;

        console.log("file: ",fileList);
        for (let i = 0; i < fileList.length; i++) {
            var files = fileList[i];
             console.log("files are: ",files);
             this.files.push(files);

        } 
        }

        remove(file: any){

             console.log("delete file:..", file)

              var index = this.files.indexOf(file);
            this.files.splice(index, 1)
            console.log("total files in list:..", this.files)

         }

        onSubmit (documents: any) {
             console.log("returned objects are:..", documents)

        }
    }

从'@angular/core'导入{Component，OnInit，OnChanges}；
从“@angular/common”导入{NgClass，FORM_指令，控件，ControlGroup，FormBuilder}；
从“@angular/ROUTER deprecated”导入{ROUTER_DIRECTIVES}”；
从“../../fleet/fleetControlPanel/fleetControlPanelService”导入{FleetService}；
从“/DocumentManagementService”导入{DocumentManagementService}；
@组成部分({
选择器：“文档管理”，
templateUrl:'app/dashboard/features/documents/documentManagement/documentManagementTemplate.html'，
指令：[路由器指令，NgClass，表单指令]
})
导出类DocumentManagementComponent实现OnInit、OnChanges{
myform：对照组；
档案：任何[]；
文件：任意[]=[]；
卡车：任何[]；
错误消息：任何；
选中：布尔值；
//构造函数循环产品服务文件中的产品，并以html显示
建造商（专用车队服务：车队服务、专用文档管理服务：文档管理服务、，
_formBuilder:formBuilder）{
this.myform=\u formBuilder.group({
“文档ID”：[]，
“类型”：[]，
“来源”：[]，
“日期”：[]，
“tripId”：[]，
‘注释’：[]
})
}
ngOnInit（）：void{
}
ngOnChanges（）：void{
}
onClickUploadDocument（事件）{
console.log（“单击”）
let fileList:fileList=event.target.files；
log（“文件：”，文件列表）；
for（设i=0；i

---

有人能帮我返回为所有文档输入槽输入的值吗。谢谢。

每行绑定到同一个控件实例。您需要将每个实例绑定到它们自己的实例

<tbody *ngFor="let file of files let i=index">
    <tr > 
    <td>{{file.name}}</td>
    <td><input type="text" ngControl="documentId{{i}}" #documentId="ngForm"></td>
    <td><input type="text" ngControl="type{{i}}" #type="ngForm"></td>
    <td><input type="text" ngControl="source{{i}}" #source="ngForm"></td>
    <td><input type="date" ngControl="date{{i}}" #date="ngForm"></td>
    <td><input type="text" ngControl="tripId{{i}}" #tripId="ngForm"></td>
    <td><input type="text"ngControl="notes{{i}}" #notes="ngForm"></td>
        <td>
            <a (click)="remove(file)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a> 
        </td>
    </tr>
</tbody>

更新

此.files

时（添加或删除项目），则

此.form

也需要更新

---

您可以考虑包装组件中的每一行，并将其作为控件来简化代码。组件需要实现

ControlValueAccessor

如图所示，例如在

Hi Günter中，在实现您的答案后，我发现这个错误原始异常：找不到控件“documentId0”`原始异常：找不到控件“documentId0”，很难说。也许是您构建它的方式，

*ngFor

在控件添加到

myForm

之前运行。这将需要一个Plunker来复制和调试。是的，我想这就是发生的事情，我将创建一个Plunker，以便您能够更好地理解为什么它不能在Plunker中工作

       this.myform = _formBuilder.group({
       })

       this.files.forEach((f, i) => {
            this.myForm.addControl('documentId' + i, new Control()),
            this.myForm.addControl('type' + i, new Control()),
            this.myForm.addControl('source' + i, new Control()),
            this.myForm.addControl('date' + i, new Control()),
            this.myForm.addControl('tripId' + i, new Control()),
            this.myForm.addControl('notes' + i, new Control()),
       })