提交后如何禁用按钮

Question

I develop a form to add users, the form works, but the problem is when click on the button submit two successive times, the method add two users, I want the button submit (add) disable after click directly ( I work with angular 5)

HTML Code :

 <form [formGroup]="addfrm"> ... ... <div style="text-align:center"> <button class="btn btn-primary" (click)="processAdd()" [disabled]="addfrm.invalid">add</button> <button data-dismiss="modal" class="btn btn-default">cancel</button> </div> </form> 

Answer 1

You can try with ngForm directive :

<form [formGroup]="addfrm" #myform="ngForm">

  <div style="text-align:center">
    <button class="btn btn-primary" (click)="processAdd()" [disabled]="myform.submitted">add</button>
    <button data-dismiss="modal" class="btn btn-default">cancel</button>
  </div>

</form>

Answer 2

You can define a field within your component and set it to true when submitted.

<button class="btn btn-primary" (click)="processAdd()" [disabled]="addfrm.invalid || submitted">add</button>

within component

export class MyComponent {
    submitted = false;
    ...

    processAdd() {
        this.submitted = true; 
        this.someService.post(this.addForm).subscribe(result => {
            this.submitted = false; // reset it on response from server
        });
    }

}