Button loading directive has conflict with disabled directive

[ChrTall]

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]

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

[bonfantefilippo]

@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

[miroslavgrozdanovski]

@nzbin, we've just encountered the same issue. Looking at the source code, this issue happens because whenever the loading input flag is changed back to false, the disabled attribute is always removed, not taking into consideration that we may only want to stop the loader, but keep the button disabled.

[nzbin]

@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

Can you give me an online example?

[nzbin]

20.2.0 has fixed.