使用相关文件分配/添加输入表单数据并上传到服务器角度2

时间:2016-06-21 23:22:16

标签: typescript angular angular2-template angular2-forms angular2-components

我是角色2的新手。我有一个表格输入表,列出了上传/选择文件时的多个文件名。输入每个文件的数据后,我想分配/添加具有相应表单数据的所选文件并将其发送到服务器。

  1. 如何为表单数据分配/添加相应的文件?
  2. 如何将这些文件及其各自的表单数据发送到服务器?
  3. 以下是我的代码。任何帮助或解决方案将非常感谢。感谢。

    模板

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

0 个答案:

没有答案