Why Angular 8 form submitted multiple times?

Question

I am new to angular. I have a form like this:

<h2>Login</h2>
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
        <label for="username">Username</label>
        <input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
        <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
            <div *ngIf="f.username.errors.required">Username is required</div>
        </div>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
        <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
            <div *ngIf="f.password.errors.required">Password is required</div>
        </div>
    </div>
    <div class="form-group">
        <button [disabled]="loading" class="btn btn-primary">
            <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
            Login
        </button>
    </div>
</form>

By clicking on the button, it submits the form multiple times.

Why this is so?

Any help appreciated

Thanks

Your code is perfectly fine, either update your question or provide a reproducer. — , Jun 15 '20 at 11:01
I thought `[disabled]` only takes a `string` and not a `boolean`? `[disabled]=" loading ? 'disabled': '' "` unless im mistaken? — Bargros, Jun 15 '20 at 11:04
@Bargros: `[disabled]` with the square brackets denote the property is bound to the controller variable `loading` which presumably is a boolean. And yes it accepts boolean. — ruth, Jun 15 '20 at 11:06
@MichaelD `https://stackoverflow.com/questions/6961526/what-is-the-correct-value-for-the-disabled-attribute` points to the contrary. — Bargros, Jun 15 '20 at 11:10
@Bargros: Like I said, when it is enclosed in square brackets the property is bound to the variable `loading`. So if `loading` is false, the generated DOM would be `` and if `loading` is true the DOM would be ``. Here is an example: https://stackblitz.com/edit/angular-ivy-8obkfk — ruth, Jun 15 '20 at 11:12
@MichaelD fair enough, that is something i was not aware of. — Bargros, Jun 15 '20 at 11:31
Create a demo on stackbltz in which u have reproduced ur problem issue is like this we don't have enough information — hanan, Jul 06 '20 at 07:33

score 0 · Answer 1 · answered Jun 16 '20 at 04:46

What are you expecting? The onSubmit function will run each time you submit the form.

If you only want it to submit if the form is valid then

(ngSubmit)="f.valid && onSubmit()"

or if you only want it to submit once have a submitted flag

(ngSubmit)="!submitted && onSubmit()"

and on the component

submitted = false;
onSubmit() {
  this.submitted = true;
}

score 0 · Answer 2 · answered Sep 01 '20 at 15:50

Remove the (ngSubmit)="onSubmit()" from the form and add a Click event on your button like this:

<button [disabled]="loading" class="btn btn-primary" (click)="onSubmit()">
  <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
  Login
</button>

Why Angular 8 form submitted multiple times?

2 Answers2