如何在提交时以 Angular 7 反应形式应用验证？答案

【问题标题】：How to apply validation in angular 7 reactive forms on submit?如何在提交时以 Angular 7 反应形式应用验证？
【发布时间】：2019-08-20 06:29:00
【问题描述】：

TS 代码：

onSubmit(){
 if(this.Registration.invalid){
   return;
  }
alert('Thanks for submitting! Data:' + JSON.stringify(this.Registration.value));

}

HTML 代码：

<form class="admin-form" [formGroup]="Registration" (ngSubmit)="onSubmit()" id="Registration">
    <mat-form-field appearance="outline">
        <mat-label>username</mat-label>
        <input matInput class="matInput" placeholder="username" type="text" formControlName="username">
    <mat-icon matSuffix>person</mat-icon>
      <mat-error *ngIf="Registration.controls['username'].invalid && (Registration.controls['username'].dirty ||Registration.controls['username'].touched)">
        <div *ngIf="Registration.controls['username'].errors.required">
          username is required.
        </div>
        <div *ngIf="Registration.controls['username'].errors.pattern">
          username must be characters and special characters.
        </div>
       </mat-error>
  </mat-form-field>
  <button mat-icon-button type="submit" value="submit">
    <i class="material-icons">send</i>
  </button>
</form>

提交按钮上的 Angular 7 反应式表单验证，如果有的话我想要错误或输入字段为空，则表单应未成功提交。

【问题讨论】：

你能分享你的代码吗？

标签： html typescript angular7

【解决方案1】：

删除!，因为它在表单无效时返回true，即它有错误并在表单有效时返回false，如：

if (this.Registration.invalid) {
   return;
}

alert('Thanks for submitting! Data:' + JSON.stringify(this.Registration.value));

但是最好用form.valid来检查表单Validation，解释一下here

所以valid 的变化是使用!：

if (!this.Registration.valid) {
   return;
}

alert('Thanks for submitting! Data:' + JSON.stringify(this.Registration.value));

另一种方式和推荐：

如果表单无效，您也可以禁用按钮本身，因此在表单有效之前，提交按钮将为 disabled，例如：

[disabled]="!Registration.valid" OR [disabled]="Registration.invalid"

带按钮：

<button mat-icon-button type="submit" [disabled]="!Registration.valid" value="submit">
  <i class="material-icons">send</i>
</button>

Stackblitz_Example

【讨论】：