I need a way to prevent users from clicking the submit button multiple times while the form is being processed by the server. Below is the solution I have come up with:
clear() {
this.count++
this.formGroup.get('name').reset(null);
..........
if (this.count === 2) {
this.count = 1;
document.querySelector('.create-btn').setAttribute('disabled', '');
}
}
isDisabled() {
document.querySelector('.create-btn').removeAttribute("disabled");
}
Here is the HTML code:
<form [formGroup]="formGroup" (ngSubmit)="submit()" >
<div class="form-group" [ngClass]="errorClasses('name')">
<label>Name</label>
<input type="text" class="form-control name" formControlName="name" (click)="isDisabled()">
<div class="help-block form-text with-errors form-control-feedback" *ngIf="controlHasErrors('name')">
{{controlValidateMessage('name')}}
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<button type="button" class="btn btn-block"
[ngClass]="{'btn-success': formGroup.get('enabled').value, 'btn-light': !formGroup.get('enabled').value}"
(click)="selectTnx('enabled')">
<i class="fa fa-check mr-2"*ngIf="formGroup.get('enabled').value"></i>Enabled
</button>
</div>
</div>
</div>
</form>
Are there any other methods to disable the submit button while the form is being submitted?