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

我刚接触 Angular。我已经仔细阅读了这个、这个和这个问题，但它们对我没有用，因为它们使用了 jquery。我的表单是一个非常基础的注册表单，只有 4 个基本字段：用户名、密码、确认密码和邮政编码，还有一个提交按钮。为了保持帖子整洁，并且涉及多个文件，我已将必要的文件上传到 GitHub。

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

我正在分别处理 password 和 zipcode 的验证器

4. validator.ts

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

附注：我正在跟着这个YouTube教程。

答案＃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>