search

ng-matero / extensions

Angular Material Extensions Library.
https://ng-matero.github.io/extensions/
MIT License
393 stars 48 forks source link

Button loading directive has conflict with disabled directive #207

Closed ChrTall closed 5 months ago

ChrTall commented 1 year ago

I would like to use the [loading] directive, while the api loads data, for a button. This works like described in the docs, but I have the problem that I also want to conditionally set the [disabled] directive on the button, which seems to have no effect. The button is used with the [matMenuTriggerFor] directive to display a MatMenu.

nzbin commented 1 year ago

Can you give an online example? I want to know how you use it.

bonfantefilippo commented 1 month ago

@nzbin Hi! Is this issue closed since it's fixed or not? I faced the same issue by combining the [disabled]="formGroup.invalid" and [loading]="isLoadingSave"

<button
            type="button"
            mat-flat-button
            [disabled]="myForm.invalid"
            [loading]="isLoadingSave"
            color="primary"
            (click)="saveForm()">
            {{ t('BUTTONS.save') }}
</button>

On saveForm, the flag isLoadingSave is set to false when an API completes and also the form is reset to its initial state. If I remove the loading attribute, the button correctly disable, but with disabled and loading together not.

Lib version used: 16.1.3