File Uploader Required field validation click on button click

[Megha Patel]

How can i Check Required field validation on Submit button click in angular?

<div class="form-group row">

                    <label class="col-md-4 control-label">File</label>

                    <div class="col-md-8">

                        <ejs-uploader #defaultupload id='fileupload' (failure)="OnFileUploadSuccessorFailure($event)"

                            (success)="OnFileUploadSuccessorFailure($event)" maxFileSize='4294967295' [asyncSettings]='path'

                            [autoUpload]='autoUpload' (removing)='onFileRemove($event)' (change)="onFilechange($event);" multiple='false' 

                            (chunkSuccess)='onFileChunkSuccess($event)' (chunkUploading)='onFileChunkUploading($event)' 

                            (uploading)='onFileUploading($event)'>

                        </ejs-uploader>

                    </div>

                </div>

<div class="form-group row">

                <div class="col-md-12">

                    <button md-raised-button color="accent" (click)="onSubmit()">Save</button>

                    <span class="space"></span>

                    <button md-raised-button color="warn" [disabled]="canceldisabled"

                        (click)="oneditcancel()">Cancel</button>

                </div>

            </div>

[Berly Christopher]

Hi Megha, 

  

Greetings from Syncfusion support. 

  

Currently we are working on the reported issue. So, we will check and update the further details in two business days (13^th May 2021). 

  

Regards. 

Berly B.C 

[Berly Christopher]

Hi Megha, 

  

Greetings from Syncfusion support. 

  

We can achieve the requested requirement by integrating the input text with EJS uploader in side the form and added required validation. Kindly refer the below demo sample.  

  

File Uploader with Reactive form: https://ej2.syncfusion.com/angular/demos/#/material/uploader/file-upload-with-reactive-forms  

File Uploader with Template-driven form: https://ej2.syncfusion.com/angular/demos/#/material/uploader/file-upload-with-template-driven-forms  

  

   <div class="form-group" style="padding-top: 11px;"> 

                                  <div class="e-float-input upload-area"> 

                                      <input type="text" id="upload" name="upload" [(ngModel)]="uploadInput" readonly formControlName="upload" class="required"> 

                                      <button id="browse" class="e-control e-btn e-info" (click)='browseClick()'>Browse...</button>                         

                                      <span class="e-float-line"></span> 

                                      <label class="e-float-text e-label-top" for="upload">Choose a file</label> 

                                  </div> 

                                  <app-field-error-display [displayError]="isFieldValid('upload')" errorMsg="* Please select an image file"> 

                                  </app-field-error-display> 

                                  <ejs-uploader #defaultupload id='fileupload' allowedExtensions = "image/*" [autoUpload]=false [multiple]='multiple'  (selected)='onFileSelect($event)'></ejs-uploader>                                         

                          </div> 

  public onFileSelect: EmitType<Object> = (args: any) => { 

    this.uploadInput = args.filesData[0].name; 

  } 

 

 

  

Regards, 

Berly B.C