on disabled mdb-select [clearButton] is not disabled

Topic: on disabled mdb-select [clearButton] is not disabled

ammi pro asked a year ago

Please disable clear button on disabled control. Any work around for now?

get optionVendor(): AbstractControl { return this.myForm.get('optionVendor')!};
this.optionVendor.disable();

<mdb-form-control>
                <mdb-select mdbValidate id="drpVendor" [clearButton]="true"
                  formControlName="optionVendor">
                  <mdb-option *ngFor="let option of vendorOptions" [value]="option.value">{{
                    option.label
                    }}</mdb-option>
                </mdb-select>
                <label mdbLabel class="form-label" for="drpVendor">Vendor Name</label>
              </mdb-form-control>

it disables control but clear button still works.Thanks

Rafał Seifert commented a year ago

Could you edit your post and provide sample code how you implement your template? So we can recreate your problem. Did you try to use [disabled] input of mdb-select component?

ammi pro commented a year ago

post was updated to include html. Using [disabled] on reactive form is not recommended.

Add comment

Rafał Seifert answered a year ago

0 0 Best answer

I am confirming that it is a bug on our side. For now you can try to create a helper function :

setClearButton(): boolean {
    return this.optionVendor.disabled ? false : true;
  }

and in template set the clearButton input dynamically like this:

<mdb-form-control>
  <mdb-select mdbValidate id="drpVendor" [clearButton]="setClearButton()" formControlName="optionVendor">
    <mdb-option *ngFor="let option of vendorOptions" [value]="option.value">{{
      option.label
    }}</mdb-option>
  </mdb-select>
  <label mdbLabel class="form-label" for="drpVendor">Vendor Name</label>
</mdb-form-control>

Add comment

Arkadiusz Idzikowski staff answered 10 months ago