1

我是 Angular 2 的新手。我有一个表单输入表，在上传/选择文件时列出了许多文件名。为每个文件输入数据后，我想用各自的表单数据分配/添加所选文件并将其发送到服务器。

  1. 如何将相应的文件分配/添加到其表单数据？
  2. 如何将这些文件及其各自的表单数据发送到服务器？

下面是我的代码。任何帮助或解决方案将不胜感激。谢谢。

模板 

<h1 class="separator">Manage Documents</h1>
<!-- in transit -->

<div class="row">
  <div class="col-xs-3">
    <input type="file" id="uploadFile" style="display: none" (change)='onClickUploadDocument($event)' multiple>
      <label for="uploadFile"  class="btn btn-primary">Select Documents to Upload</label>

  </div>
</div>

<form [ngFormModel]="uploadDocumentForm" (ngSubmit)="sendDocumentsToTruck(uploadDocumentForm.value, i)">
<table cellpadding="4" class="grid" >
<thead><tr><th>Document Name</th><th>Document Type</th>
<th>Document Date</th><th>Notes</th><th>Fleet ID</th><th>Action</th></tr></thead>

<tbody *ngFor="let file of files; let i=index>

    <tr > 
    <td ><input type="text" class="form-control" style="display: none" [(ngModel)]="file.name"  ngControl="fileName{{i}}" >
            {{file.name}}
    </td>
    <td ><input type="text" class="form-control" ngControl="type{{i}}" ></td>
    <td ><input type="date" class="form-control" ngControl="date{{i}}" ></td>
    <td ><input type="text" class="form-control" ngControl="notes{{i}}" ></td>
    <td >
         <input type="button"  value="Select Truck" class="btn btn-primary" 
          data-toggle="modal" data-target="#selectTruckModalID"  (click)="selectTruck(i)">
         <input type="text" class="form-control" style="display: none"
           ngControl="fleetId{{i}}" [(ngModel)]="selectedTruckId[i]" >  
    </td>
    <td >
           <a (click)="remove(file)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>     
    </td>
    </tr>

</tbody>

</table>

<!-- send button -->
<button type="submit" class="form-group" class="btn  btn-primary " >Send</button>
 </form>

零件

import {Component, OnInit, OnChanges, Output, EventEmitter} 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';

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

export class DocumentManagementComponent implements OnInit, OnChanges {

    uploadDocumentForm: ControlGroup;
    file: any;
    files: any[] = [];
    errorMessage: any;
    trucks: any[];
    truckId: any;
    documentIndex: number;
    selectedTruckId: any[] = [];

    @Output() refreshDocumentList: EventEmitter<any> = new EventEmitter<any>();

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

        this.uploadDocumentForm = _formBuilder.group({


        });

    }

    ngOnInit(): void {
               //  load list of trucks
        this._fleetService.getFleets()
             .subscribe(
                 fleets => {
                     this.trucks = fleets
                     console.log("total trucks in list:..", this.trucks)
                 },
                 error => this.errorMessage = <any>error)
    }

    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++) {
        this.file = fileList[i];
         console.log("files are: ",this.file);
         this.files.push(this.file);

    } 

         this.files.forEach((value, index) => {
             this.uploadDocumentForm.addControl('fileName' + index, new Control()),
            this.uploadDocumentForm.addControl('type' + index, new Control()),
            this.uploadDocumentForm.addControl('date' + index, new Control()),
            this.uploadDocumentForm.addControl('fleetId' + index, new Control()),
            this.uploadDocumentForm.addControl('notes' + index, new Control())
        })
        console.log("total files in list:..upload..", this.files)
    }

    // send document and related form details to server on click SEND
    sendDocumentsToTruck (documents: any) {
         console.log("file:..", documents)
   }
}
4

0 回答 0