It's removing "disabled" attribute on start

[rosostolato]

I have a mat-button that is being disabled by form control validation property... but promiseBtn is removing disabled attribute at start:

<button
        mat-icon-button
        color="success"
        *ngIf="row.editing"
        (click)="confirmEditCreate(row)"
        [disabled]="row.form.invalid"
        [promiseBtn]="saveButtonSubscription"
></button>

So it should be like the following screenshot, but disabled is being removed:

while I was debugging the code, I could see that it calls this method on start, which is causing the issue (line 123)

  removeLoadingClass(el: any) {
    if (typeof this.cfg.btnLoadingClass === 'string') {
      el.classList.remove(this.cfg.btnLoadingClass);
    }
  }

[johannesjo]

Thank you very much for reporting. I'll try to check this tomorrow.

[johannesjo]

I am unable to reproduce this. May I ask which version of angular you are using?

[rosostolato]

Well, in this project I'm using angular 7.2.16 and I didn't test it in other projects with latest angular. Do you think it can be the problem?

[johannesjo]

Might be. There actually is some code to enable/disable the button, but normally this shouldn't be called until it is clicked. You can disable this in the configuration of the library (by setting disableBtn to false). Does that make any difference?

[rosostolato]

Yep, that is what I did, but the disable feature is great while the button is loading. I will create a standalone project and try to reproduce it to share with you

[PieterVanPoyer]

Hi

Thanks for the nice library.

I created a standalone reproduction of the (a related) problem in my opinion: https://stackblitz.com/edit/angular-ivy-d3tray The disabled setting of the button is removed by the angular2-promise-buttons. After the setting of the disabled flag, an own disables setting (fe a form.invalid) is not working anymore.

Kind regards Pieter

[johannesjo]

@PieterVanPoyer thank you! I'll try to have a look as soon as I can. Meanwhile PRs are welcome! :)

[johannesjo]

Thanks to @PieterVanPoyer this can be closed. I also published a new patch release.

[Gillardo]

What version is this fix in, as i am experiencing the problem and i am running version 4.0.7, which i believe is the latest version available. I have tried to update the example above to load 4.0.7 but it errors

[Gillardo]

As you see same problem

My code is very simple

        <button type="button"
                class="btn btn-outline-primary"
                (click)="onSave()"
                [disabled]="user.username === ''"
                [promiseBtn]="saveSubscription">Save
        </button>

[johannesjo]

@Gillardo seems like I forgot to pull the changes in locally before making a new release.... Very sorry and thanks for letting me know. The update should be out now!

[Gillardo]

I am sorry, but i have upgraded to 4.0.8 and the problem is still there.

Not sure if this helps in any way, but here is the problem

But if i click my button, which should be disabled (which calls a web api, not sure if that matters), then it works after that and the code is correct.

[Gillardo]

Also, if i revert to version 4.0.5, this is working

[johannesjo]

You're right. I published another release with a fix for the issue.

[Gillardo]

4.0.9 works great! thank you