Angular4輸入文件與ngForm模塊

Question

文件不發送。

文件沒有附加在click事件中。

通過控制檯的JSON顯示爲空。

<form #form="ngForm" enctype="multipart/form-data" novalidate> 

<input type="file" id="file" name="file1" class="form-control" ngModel> 

<input type="file" id="file" name="file2" class="form-control" ngModel> 

       <button class="btn btn-primary" (click)="envirArquivos(form.value)">Enviar</button> 

      </form> 

文件TS

import { Component, OnInit } from '@angular/core'; 


@Component({ 
    selector: 'mw-compare-nfe', 
    templateUrl: './compare-nfe.component.html' 
}) 
export class CompareNFEComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

    envirArquivos(form) { 
    console.log(form); 
    } 

} 

{ 「文件1」： 「」， 「文件2」： 「」} 空

Answer 1

您不能input type = 'file'使用ngForm作爲文件中的值訪問類型不限於$event.target.value，而是event.target.files。

這麼一件事，你可以做的是：

• 更新您的HTML

  <input type="file" id="file" name="file1" class="form-control" ngModel (change)="getFiles($event)">

• 添加一個變化事件

• 也能聆聽到您的JS更改事件文件。

  getFiles(event) { 
      console.log(event.target.files); 
  } 
  

• 現在您可以將這些值存儲在您的變量中並使用表單提交。