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

【问题标题】：Why Angular 8 form submitted multiple times?为什么 Angular 8 表单多次提交？
【发布时间】：2020-06-15 10:54:50
【问题描述】：

我是 Angular 的新手。我有这样的表格：

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

通过点击按钮，它会多次提交表单。

为什么会这样？

任何帮助表示赞赏

谢谢

【问题讨论】：

您的代码非常好，请更新您的问题或提供复制器。
你可以尝试从按钮中删除禁用并检查一次
我以为[disabled] 只需要string 而不是boolean？ [disabled]=" loading ? 'disabled': '' " 除非我弄错了？
@Bargros：就像我说的，当它被括在方括号中时，属性绑定到变量loading。所以如果loading 为假，则生成的DOM 将为<button>Click</button>，如果loading 为真，则生成的DOM 为<button disabled>Click</button>。这是一个例子：stackblitz.com/edit/angular-ivy-8obkfk
@MichaelD 很公平，这是我不知道的。

标签： javascript angular typescript angular8 angular-forms

【解决方案1】：

你期待什么？每次提交表单时都会运行 onSubmit 函数。

如果您只希望它在表单有效的情况下提交，那么

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

或者如果你只希望它提交一次有一个提交标志

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

在组件上

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

【讨论】：

【解决方案2】：

从表单中删除(ngSubmit)="onSubmit()" 并在按钮上添加Click event，如下所示：

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

【讨论】：