提交后如何在 Angular 反应形式中禁用按钮

Question

我正在使用角度反应形式，如何在单击/提交后禁用按钮并更改按钮标签？

Answer 1

Angular does not provide a "form submitted" property on forms. The best way would be to update a boolean (that you use in the template) when submitting the form and reset it when appropriate.

The following example uses reactive forms and fakes a POST with the form data.

<form [formGroup]="myForm"
      (ngSubmit)="onSubmit()">
  ... form stuff ...
  <button type="submit"
          [disabled]="isSubmitting">
    {{isSubmitting ? 'Submitting...' : 'Submit'}}
  </button>
</form>

onSubmit(): void {
  // catch if the form has errors
  if (this.myForm.invalid) return;

  // if no errors, continue with the submit
  this.isSubmitting = true;

  this.http
    .post('www.example.com', this.myForm.value)
    .subscribe(
      success => { this.isSubmitting = false },
      error => { ... handle the error ... }
    );
}

Answer 2

you can create a local variable and make it true when ever submit action happen. Also you can put variable name in button

<!-- html file->
<form [formGroup]='myForm' (ngSubmit)='onSubmit()'>
 ..........
 .........
<button type="submit" [disabled]="makeDisable"> {{btnName}} </button> 

// Ts file
btnName = 'submit'; // initial label
makeDisable = false;
onSubmit() {
   this.makeDisable = true;
   this.btnName = 'label changed'; // change the label
   // make API call If every thing is done put this code in async callbabck
   this.makeDisable = false;
   this.btnName = 'submit'; // restore the label
}