Re-Enable Submit button after doing some Corrections in an Angular Form

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() || submitted" 
       (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) {
      ... 
   }
}

Here,

• Initially, Submit button will be in Disabled Mode.
• When all the Form values are entered, Button will be Enabled.
• After submitting the Form, again Button will be Disabled.

What I want is - After submitting, If I get an error from API (say "Duplicate Record"), I need to do some corrections in Form Values. After making corrections, I need to enable the button again second time. How to do this?

Answer 1

I resolved this by adding Form Subscription under finalize()

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

Answer 2

try this...

HTML

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

TS

    submitted = true;

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

Answer 3

Create a property public submitted = false in your .ts file. This will detect form submit status.

create a getter method get isFormValid(): boolean {}. This will detect form valid status.

public submitted = false;

get isFormValid(): boolean {
  return this.formCreateNewPlan.valid && !this.submitted;
}

reset the submit status after success or error response from API.

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

Add the isFormValid method on your button to enable or disable it.

<button [disabled]="!isFormValid" (click)="createNewPlan()">Save</button>