How to validate email address from a mat input?(Angular Material)

Question

How can I validate an email address to have an @ sign and a dot without pressing on a button, without a form. I would appreciate any help.

<mat-form-field class="example-full-width">
  <input matInput placeholder="Favorite food" value="Sushi">
</mat-form-field>

Answer 1

You could use pattern and define a regex to validate email address,

<input matInput placeholder="Favorite food" [(ngModel)]="enterEmail" name="myEmail" pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" required>

Answer 2

I'm using Angular 8, and it has directive EmailValidator.

Use with ngModel like this:

<input type="email" name="email" ngModel email>
<input type="email" name="email" ngModel email="true">
<input type="email" name="email" ngModel [email]="true">