为什么Angular 8表单提交多次？

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

Answer 1

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

Answer 2

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>