How disable button after submit

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 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
        });
    }

}