Enable / Disable button in Angular Form based on API Response

Question

I am using Angular8 with Reactive form. Initially I'm disabling the Submit button until the entire form is filled with valid data.

<div>
  <form>
     ...........
  </for>
  <button [disabled]="(checkifSaveEnabled() && !formCreateNewPlan.valid)" 
       (click)="createNewPlan()">Save</button>
</div>

In the class (TS) file:

checkifSaveEnabled() {
  if (this.formCreateNewPlan.pristine || !this.formCreateNewPlan.valid) {
    return true;
  }
  return false;
}

createNewPlan(): void {
   this.submitted = true;
   this.myservice.create(this.formCreateNewPlan.value).subscribe(result => {
   if (result.success && result.data.planId > 0) {
      ... 
   }
}

Everything is working fine here. But, I want to disable the Button On Submit (to avoid multiple clicks) and Make it enable back if I get any errors from my Service (API) response. How to achieve this?

Jasdeep Singh · Accepted Answer · 2020-10-16 07:37:59Z

4

You can use submitted that will be true if API is in progress and will become false if API resolves or reject. Now you can use finalize operator to set submitted to false inside it. It will execute after the success or error block of observable.

createNewPlan(): void {
   this.submitted = true;
   this.myservice.create(this.formCreateNewPlan.value)
.pipe(finalize(() => { this.submitted = false; }))
.subscribe(result => {
   if (result.success && result.data.planId > 0) {
   }

}, (error) => {
  console.log(error)
});

Corresponding change in Template

<button [disabled]="submitted || (checkifSaveEnabled() && !formCreateNewPlan.valid)" 
       (click)="createNewPlan()">Save</button>

answered Oct 16, 2020 at 7:37

Jasdeep Singh

8,3411 gold badge17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Unknown Coder Over a year ago

on submit, button is disabling now. If I get a Server error say "Duplicate record" and I want to fix this, how to re enable it after correcting the values in a Form?

Jasdeep Singh Over a year ago

I did not understand your point. After the success or error response, the button will be enabled automatically because of the code written inside the finalize block. Please let me know if I miss something here.

Bhushan Kawadkar · Accepted Answer · 2020-10-16 07:34:37Z

1

you just need to add one this.submitted in the disabled attribute of button, see below code

<button [disabled]="submitted || (checkifSaveEnabled() && !formCreateNewPlan.valid)" 
       (click)="createNewPlan()">Save</button>

answered Oct 16, 2020 at 7:34

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

7 Comments

Unknown Coder Over a year ago

on submit, button is disabling now. If I get a Server error say and I want to fix this, how to re enable it after correcting the values in a Form?

Bhushan Kawadkar Over a year ago

after server response you can make this.submitted=false (both in success or error case), this will enable the button

Unknown Coder Over a year ago

but it'll enable immediately after getting error. It should enable after making corrections in Form

Bhushan Kawadkar Over a year ago

then in this case change || to &&

Bhushan Kawadkar Over a year ago

ok... got your problem ... you can keep || as it is and call form validation method after server response and as per response make this.submitted=false ... hope this should help

|

Collectives™ on Stack Overflow

Enable / Disable button in Angular Form based on API Response

2 Answers 2

2 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related