FormBuilder, FormGroup and ReactiveFormModule does not detect changes in a file type input in chrome

0

Hello friends of Stack I have a problem, I am using FormBuilder, FormGroup, Validator and ReactiveFormModule in my project to validate the fields of a form.

In this form I have an INPUT of type FILE, in Firefox it has worked well for me, but in CHROME it never detects that I have put a file.

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient, HttpHeaders } from "@angular/common/http";
import {FileItem} from "../../../models/file-item";
import { CargaCurriculoService } from "../../../../app/services/carga-curriculo.service";

declare var $: any;

@Component({
  selector: 'unete-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.css']
})
export class UneteBodyComponent {

  candidateForm: FormGroup;

  // Para guardar el curriculo vitae del candidato
  curriculo: FileItem[] = [];

  // pattern para verificacion de URL original ---  '^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}'

  constructor (private fb: FormBuilder, private httpClient: HttpClient, public _cargaCurriculo: CargaCurriculoService ) {

    this.candidateForm = fb.group({
      'inputJob': [null, [Validators.required]],
      'inputName': [null, [Validators.required, Validators.minLength(6)]],
      'inputSurname': [null, [Validators.required, Validators.minLength(6)]],
      'inputEmail': [null, Validators.compose([Validators.required, Validators.email])],
      'inputCel': [null, [Validators.pattern('[0-9]+'), Validators.minLength(10), Validators.maxLength(10)]],
      'inputCv': [null, [Validators.required]],
      'inputLinked': [null, [Validators.pattern('https://linkedin.com/{0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}$')]],
});

  }

  submitCandidateForm(post) {

    this._cargaCurriculo.saveCurriculoFirebase(this.curriculo);

    //const files: FileList = this.fileInput.nativeElement.files;
    const files: FileList = post.inputCv.nativeElement.files;

    const formData = new FormData();
    formData.append(files[0].name, files[0]);

    console.log(files);

    let data = {
      position: post.inputJob,
      name: post.inputName,
      surname: post.inputSurname,
      email: post.inputEmail,
      cel: post.inputCel,
      cv: post.inputCv,
      linkedin: post.inputLinked
    };


    console.log(post);

// let headers = new HttpHeaders();
// headers.set('Content-Type', 'multipart/form-data');
// let options =  {
//   headers: headers
// };
//
//
// this.httpClient.post("http://localhost:9200/api/save_candidato", formData, options)
//   .subscribe(
//     (data: any) => {
//       console.log("DATA");
//       console.log(data);
//     }
//   );

  }
}

Here the fields are working well

and even when you select the file, the validation in the CV field is never removed.

    
asked by Kevin Flores 01.03.2018 в 18:00
source

0 answers