проверка электронной почты в угловых 6?

Question

У меня есть форма в 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>

user.component.ts

import {FormControl, Validators} from '@angular/forms';
email = new FormControl('', [Validators.required, Validators.email]);

getErrorMessage() {
  return this.email.hasError('required') ? 'You must enter a value' :
    this.email.hasError('email') ? 'Not a valid email' : '';
}

saveNewUserDetails(){
  if(this.userObj.userName.trim() != ''){
    const formData = new FormData();
      formData.append('username',this.userObj.userName);
      formData.append('emailid',this.userObj.emailid);
      this.userService.saveNewUserDetails(formData).subscribe(
       (data) => {
         console.log("user is saved successfully");
       }           
     )
   }
  }       

Answer 1

Если вы не хотите отключать кнопку «Сохранить», но по-прежнему хотите запретить сохранение, вам нужно поместить эту информацию в обработчик сохранения. Если вы просто хотите, чтобы кнопка не работала, вы можете сделать это в шаблоне, например так:

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

Но если вы также хотите показать уведомление, сделайте это в классе (передайте email.valid на кнопке):

<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.

Answer 2

В методе 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>