Как отключить кнопку после отправки

Question

Я разрабатываю форму для добавления пользователей, форма работает, но проблема в том, при нажатии на кнопку «Отправить» два раза подряд метод добавляет двух пользователей, я хочу, чтобы кнопка «Отправить» (добавить) отключалась после нажатия кнопки «непосредственно» (я работаю с угловым 5)

HTML код:

<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

Вы можете определить поле в вашем компоненте и установить его в true при отправке.

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

внутри компонента

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

}

Answer 2

Вы можете попробовать с директивой ngForm :

<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>