2

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

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

我正在分别处理验证passwordzipcode

  1. 验证器.ts

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

PS:我正在关注这个youtube 教程。

在此处输入图像描述

4

1 回答 1

3

首先,禁用按钮

<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>
于 2019-10-08T08:22:36.607 回答