title: email validation in angular 6?
body: <p>I have a form in angular6 with an email form field.</p>
  
  <p>The email form field has email validation which properly shows the error message when email is invalid. But the form is still saved if I click the "Save" button. How can I show the error message, but <em>not</em> save the user when clicked?</p>
  
  <p>Important requirement is that I don't want to disable the "Save" button.</p>
  
  <p>user.component.html</p>
  
  <pre><code>&lt;form method="post" enctype="multipart/form-data"&gt;
    &lt;mat-form-field&gt;
     &lt;input matInput placeholder="Enter your Username" [(ngModel)]="userObj.userName" name="username" required&gt;
    &lt;/mat-form-field&gt;
  
    &lt;mat-form-field&gt;
      &lt;input matInput placeholder="Enter your email" [formControl]="email" [(ngModel)]="userObj.emailid" name="emailid" required&gt;
      &lt;mat-error *ngIf="email.invalid"&gt;{{getErrorMessage()}}&lt;/mat-error&gt;
    &lt;/mat-form-field&gt;                   
  &lt;/form&gt;
  
  &lt;button mat-raised-button color="primary" (click)="saveNewUserDetails()"&gt;Save User&lt;/button&gt;
  </code></pre>
  
  <p>user.component.ts</p>
  
  <pre><code>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) =&gt; {
           console.log("user is saved successfully");
         }           
       )
     }
    }       
  </code></pre>