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>

https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript — AT82, Apr 18 '19 at 18:59

score 17 · Accepted Answer · answered Apr 18 '19 at 19:24

17

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>

answered Apr 18 '19 at 19:24

Sajeetharan

216,225
63
350
396

1

do u know of a way to add a message to this? without having to declare it with a formcontrol tag – WtFudgE Jul 12 '19 at 12:21

score 3 · Answer 2 · answered Apr 28 '20 at 09:03

3

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

answered Apr 28 '20 at 09:03

Robin Huy

960
7
23

score 1 · Answer 3 · answered Jun 10 '20 at 09:13

You can validate in this way as well

In your template(.html file):

<form
  [formGroup]="userForm"
  #formDirective="ngForm"
  (ngSubmit)="onFormSubmit()"
>
  <div class="form-control">
    <mat-form-field appearance="outline" class="form-field">
      <mat-label>Email Address</mat-label>
      <input
        type="text"
        matInput
        formControlName="email"
        class="form-input-field"
        pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}"
      />
      <mat-error *ngIf="userForm.get('email').hasError('required')"
        >Email is required</mat-error
      >
      <mat-error *ngIf="userForm.get('email').hasError('email')"
        >Please enter a valid email address
      </mat-error>
    </mat-form-field>
  </div>
</form>

In your component(.ts file):

userForm = new FormGroup({
  email: new FormControl('', [Validators.required, Validators.email]),
});

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

3 Answers3