在angular 6中进行电子邮件验证？

我有一个angular6格式的表单，其中有一个电子邮件表单字段

电子邮件表单字段具有电子邮件验证功能，当电子邮件无效时，该功能可正确显示错误消息。但是，如果单击“保存”按钮，表单仍然保存。如何在单击时显示错误消息而不保存用户

重要的要求是，我不想禁用“保存”按钮

user.component.html

<form method="post" enctype="multipart/form-data">
  <mat-form-field>
   <input matInput placeholder="Enter your Username" [(ngModel)]="userObj.userName" name="username" required>
  </mat-form-field>

  <mat-form-field>
    <input matInput placeholder="Enter your email" [formControl]="email" [(ngModel)]="userObj.emailid" name="emailid" required>
    <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>                   
</form>

<button mat-raised-button color="primary" (click)="saveNewUserDetails()">Save User</button>

---

在

saveNewUserDetails（）

方法中，执行以下操作：

saveNewUserDetails() {
    if (this.email.invalid) {
      // Do Not submit
    } else {
      // Submit
    }
}

或

我仍然建议在按钮中添加

[disabled]=“email.invalid”

：

<button 
  mat-raised-button 
  [disabled]="email.invalid" 
  color="primary" 
  (click)="saveNewUserDetails()">
  Save User
</button>

保存用户

如果您不想禁用“保存”按钮，但仍想阻止保存，则需要将该信息保存到保存处理程序中。如果只是希望按钮不起作用，可以在模板中执行，如下所示：

<button mat-raised-button color="primary" (click)="email.valid && saveNewUserDetails()">Save User</button>

---

我不想禁用按钮而不使按钮禁用它是不可能的？有什么具体原因吗？我已经更新了我的答案。请检查一下这是否是你想要的。

<button mat-raised-button color="primary" (click)="email.valid && saveNewUserDetails()">Save User</button>

<button mat-raised-button color="primary" (click)="saveNewUserDetails(email.valid )">Save User</button>

saveNewUserDetails(emailValid: boolean)
  if (!emailValid) {
    // show a notification or do something
    return;
  } 
  // otherwise all ok here, keep your logic.