how to disable ejs button if i not select any file in browse button(ejs-uploader)

[sunil]

Hi team,

I am working on form in that form

1)ejs-uploader(Browse button)

2)ejs-dropdownlist

3)ejs-textbox

4) ejs-button

this all component are enclosed in <form> tag

<form #justAForm="ngForm" (ngSubmit)="uploadFiles($event)" [formGroup]="contactForm">

  <!-- First row  -->

  <div class="e-card">

    <div fxFlexFill class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px">

      <div fxFlex class="child-1">

        <span id="custlabelfile">File Upload</span>

        <ejs-uploader #defaultupload (selected)='onFileSelected1($event)' change="getAgreementTypeData($event)"

          webkitdirectory directory multiple multiple = 'false' [allowedExtensions]='allowExtensions' required ></ejs-uploader>

      </div>

      <div fxFlex class="child-2">

        <ejs-dropdownlist floatLabelType="Always" id='documentName' name="documentName"

          [dataSource]='agreementTypeDatas' [fields]='fieldsvalues'  popupHeight='200px'

          (change)='onDocumentSelect($event)' ngModel

          required  [allowFiltering]='true' (filtering)='onFiltering($event)' placeholder="Select DocumentType" required>

        </ejs-dropdownlist>

      </div>

      <div fxFlex class="child-3">

        <ejs-textbox placeholder="Identifier" name="Identifier" field="Identifier" floatLabelType="Always" ngModel required>

        </ejs-textbox>

      </div>

      <div fxFlex="100px" style="text-align: right;" class="child-4">

        <button  ejs-button cssClass="e-primary" type="submit" [disabled]="contactForm.invalid" >Upload</button>

      </div>

    </div>

  </div>

</form>

problem is not able to disable upload button,while not selecting any file.

[YuvanShankar Arunagiri]

Hi Sunil,

We have validated your reported query and prepared the sample based on your requirement. Please refer the below code snippet and sample.

[app.component.html]:

<button ejs-button  [disabled]="!reactForm.valid" >Sync Button</button>

Sample link: https://stackblitz.com/edit/angular-pijakq?file=app.component.html

Could you please check the above sample/code and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

[sunil]

Hi, Thanks for update.

but here i if i not select any file ,and provide value for dropdownlist and textbox,upload button is enabled. i want disabled upload button if any value is not selected.

[YuvanShankar Arunagiri]

Hi Sunil,

We have validated your reported query and prepared the based on your requirement. Please refer the below code snippet and sample and ensure to add required field in the form control for uploader.

[app.component.ts]:

ngOnInit() {

    this.form = this.formBuilder.group({

      name: [null, Validators.required],

      email: [null, [Validators.required, Validators.email]],

      mobile:  [null, [Validators.required, Validators.minLength(10)]],

      upload: [null, Validators.required],

    });

  }

Sample link: https://stackblitz.com/edit/angular-qbc5ys?file=app.component.ts

Could you please check the above sample code and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

[Ishani Shah]

Hello,

I want to disabled and enabled control (ejs-uploader) based on condition. I need two way binding like this

        <ejs-uploader #fileUploader [dropArea]='dropElement' id="ejs-uploader-{{this.controlId}}"

          [disabled]="trueConditon" [multiple]="isAllowMultipleFiles">

        </ejs-uploader>

[Shereen Shajahan]

Hi Ishani,

We have created a new forum for your query, please follow-up using the link below,

how to disable ejs button if i not select any file in browse button(ejs-uploader) - Branched from 175630 | Syncfusion Forum Assist

Regards,

Shereen