Angular4 Form input file with ngForm Module

Question

The files does not send.

The file is not attached in the click event.

Via console the json is shown empty.

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

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

}

{"file1":"","file2":""} empty

Anurag Singh Bisht · Accepted Answer · 2017-08-13 04:49:13Z

3

You cannot access the input type = 'file' using the ngForm as the value for file type is not bound to $event.target.value but instead event.target.files.

So one thing you can do is :

Update your HTML

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

And listen for the change event in your JS file.

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

Now you can store these values in your variables and submit with the form.

answered Aug 13, 2017 at 4:49

Anurag Singh Bisht

2,7514 gold badges22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular4 Form input file with ngForm Module

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related