Using reactive form validation with <input type=“file”> for an Angular app

Question

I\'m writing a component with a file picker that uploads a file to our CDN. I\'m trying to add a reactive form on this component to validate the image input, so I can check

Answer 1

As @ibrahim mention it's not implemented yet, but i got the same problem and solved it using hidden field. on onFileChange method set file.name to hidden field, where you can validate.

   

      

        Browse
           
            
        

        
{{file.name}}
      
      Upload
    



onFileChange($event) {
     let file = $event.target.files[0]; // <--- File Object for future use.
     this.form.controls['imageInput'].setValue(file ? file.name : ''); // <-- Set Value for Validation
}
fileName = '';
this.form = this.formBuilder.group({
      imageInput: [fileName, Validators.required]
});