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.