如何在所有验证通过之前阻止表单提交 [Angular 7]

Question

我是 Angular 的新手。我已经彻底阅读了 this, and this 个问题，但是其中 none 个是我使用的，因为它们正在使用 jquery。我的表格是非常基本的注册表格，只有 4 个基本字段。用户名、密码、确认密码和邮政编码以及提交按钮。为了保持这个 post 干净并且涉及多个文件，我已经在 github.

上上传了必要的文件

1. app.component.html
2. app.component.ts
3. app.module.ts

我在

中分别处理 password 和 zipcode 的验证器

4. validator.ts

验证工作正常。但问题是即使前端存在验证问题，表单仍然会被提交。这是我的截图。请给我建议一个解决方案或至少给出一些提示。

PS：我正在关注 this youtube 教程。

Answer 1

首先，禁用按钮

<button type="submit" class="btn btn-primary" (click)="onSubmit()" [disabled]="!form.valid">Submit</button>

接下来，在提交前使用条件。

  onSubmit(){
    if (!this.form.valid) return;

    // console.log(this.form.controls.zip);
    this.form.markAsTouched();
    console.log(this.form.value);

  }

最后，将该属性添加到您的表单中：

<form [formGroup]="form" novalidate>