Angular - ограничение вызовов функций от <form>при нажатии на кнопку «отправить» до одного вызова.

Question

После нажатия кнопки отправки кнопка не становится отключенной. И я могу активировать функцию отправки несколько раз.

Я хочу, чтобы функция могла вызываться только один раз. Есть ли способ ограничить вызовы функций одним разом или отключить кнопку после одного нажатия? Кроме того, моя кнопка исчезает после нажатия (это займет несколько секунд, чтобы вы могли нажать ее снова), поэтому мне все равно, будет ли кнопка отключена.

мое приложение находится в angular 5, и Мне не разрешено использовать чистые JavaScript или JQuery.

<form [formGroup]="form" (ngSubmit)="okButtonClick()">   
<button *ngIf="!isDuplicateCalendar" type="submit" autofocus containerClass="popover-small" [popover]="isValidAddCalendar()" triggers="mouseenter:mouseleave"
          class="d-button d-button_primary"  [translate]="'add'" [disabled]="isClicked"></button>
</form>

Спасибо!

Answer 1

Что вы можете сделать, это пометить некоторые поля как обязательные, при нажатии кнопки вы можете сделать что-то, как показано ниже:

<form [formGroup]="form" (ngSubmit)="okButtonClick()">   
<button *ngIf="!isDuplicateCalendar" type="submit" autofocus containerClass="popover-small" [popover]="isValidAddCalendar()" triggers="mouseenter:mouseleave"
          class="d-button d-button_primary"  [translate]="'add'" [disabled]="!form.isValid"></button>
</form>

okButtonClick(){
    //sending form data to backend using HTTP request
    this.form.reset()
 }

Answer 2

объявить переменную в тс

isClicked=false;

    okButtonClick(){
      this.isClicked =true;
     }