Disable button during form submit

Question

I want to disable button form during submit when the form is send to the server. So far this is the solution that I found:

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

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>

Is there some other way to disable the submit button when the form is submitted?

I think that this question has answers that may help you. https://stackoverflow.com/questions/37159827/is-there-any-alternative-for-ng-disabled-in-angular2 — Raphael Maia Ribeiro, Jul 18 '19 at 18:00

score 0 · Answer 1 · answered Jul 18 '19 at 18:01

0

If you want some kind of complex styling your ok. If you need something more simple. try something like this::

HTML
<input [disabled]="sendDisabled" type="button" value="Send">
...
Angular-js-class
sendDisabled = false

answered Jul 18 '19 at 18:01

Mauricio Sipmann

465
6
21

score 0 · Answer 2 · answered Jul 18 '19 at 18:09

You should just set button to disabled.

<button type="button" class="btn btn-block" [disabled] ="btnDisabled"
[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>

Now on Click of Button, you can simply set btnDisabled = true in your component. This will set button as disabled and apply appropriate styles to it.

Disable button during form submit

2 Answers2