What you can do is mark some fields as required, on button click you can do something as the code bellow:

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

declare variable in ts

isClicked=false;

    okButtonClick(){
      this.isClicked =true;
     }

After pressing the submit button, the button don’t become disabled.
And I can activate the submit function number of times.

I want to make the function to be able call only once.
Is there a way to limit the function calls to one time or to disable the button after one click?
Also, my button disappear after pressing (it take a few seconds, so you can press it again) so i don’t care if the button will stay disabled.

my application is in angular 5, and i’m not allowed to use pure JavaScript or 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>

Thanks!