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

Question

我是 Angular 的新手。我已经彻底阅读了this、this 和this 的问题，但是它们都不是我用的，因为它们正在使用jquery。我的表格是非常基本的注册表单，只有 4 个基本字段。用户名、密码、确认密码和邮政编码以及提交按钮。为了保持这篇文章干净并且涉及多个文件，我在 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>