How to validate e-mail with Angular 5

Question

I would like to know how to validate my email with .com I tried everything, but I could not, could you help me? I'm wrapping up the code I've already developed, I'm new to the angle and I'm finding it difficult on this subject. I would like the email to be validated if the user types the .com but until now I only got the basic validation, Example: example @ example. And I'd like it to be example@example.com

Thank you

.ts

   import { ActivatedRoute, Params, Router } from "@angular/router";
import { Component, OnInit, Inject, } from '@angular/core';
import { FormControl, Validators, FormGroup, FormBuilder } from '@angular/forms';
import { Observable, Subscription } from "rxjs";
import { ModelDataForm } from "./modelDataForm";
import { DOCUMENT } from "@angular/platform-browser";
import 'rxjs/add/operator/filter'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})



export class AppComponent implements OnInit {

  userService: any;
  isTCAccepted: any;
  private subscription: Subscription;
  uri: string;
  ssid: string;
  sessiondId: string;
  ip: string;
  mac: string;
  ufi: string;
  mgmtBaseUrl: string;
  clientRedirectUrl: string;
  req: string;
  userName: string;
  hmac: string;

  name: string;
  email: string;

  //checkbox
  isValidFormSubmitted: boolean = null;




  constructor(@Inject(DOCUMENT) private document: any, private route: ActivatedRoute) {
  }

  //checkbox
  onFormSubmit() {
    this.isValidFormSubmitted = false;
    if (this.userForm.invalid) {
      return;
    }
    this.isValidFormSubmitted = true;
    this.isTCAccepted = this.userForm.get('tc').value;

  }


  ngOnInit() {
    this.route.queryParams
      .filter(params => params.mac)
      .subscribe(params => {
        console.log(params);

        this.ssid = params.ssid;
        this.sessiondId = params.sessionId;
        this.ip = params.ip;
        this.mac = params.mac;
        this.ufi = params.ufi;
        this.mgmtBaseUrl = params.mgmtBaseUrl;
        this.clientRedirectUrl = params.clientRedirectUrl;
        this.req = params.req;
        this.hmac = params.hmac;
      });
  }



  emailFormControl = new FormControl('', [
    Validators.required,
    Validators.pattern('[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}'),
    Validators.email,
  ]);

  nameFormControl = new FormControl('', [
    Validators.required,
  ]);



  userForm = new FormGroup({
    tc: new FormControl('', [(control) => {
      return !control.value ? { 'required': true } : null;
    }])
  });

}

html

<mat-form-field class="hcs-full-width">

  <input matInput placeholder="Nome" [formControl]="nameFormControl" [(ngModel)]="name">
  <mat-error *ngIf="nameFormControl.hasError('required')">
    Nome é
    <strong>requirido</strong>
  </mat-error>
</mat-form-field>


<mat-form-field class="hcs-full-width">
  <input matInput  placeholder="E-mail" [formControl]="emailFormControl" [(ngModel)]="email" >
  <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required') && !emailFormControl.hasError('pattern')">
    Por favor entre com um endereço de e-mail valido
  </mat-error>
  <mat-error *ngIf="emailFormControl.hasError('required')">
    E-mail é
    <strong>requirido</strong>
  </mat-error>
</mat-form-field>

<br>

<div class="checkbox">
  <mat-checkbox class="hcs-full-width" formControlName="tc">
  </mat-checkbox>
  Aceito os termos e condições de uso
  <a data-toggle="collapse" href="#collapseExample">
    ver os termos
  </a>
</div>
<mat-error *ngIf="userForm.get('tc').invalid && isValidFormSubmitted != null && !isValidFormSubmitted" [ngClass]="'error'">
  É necessário aceitar os termos de uso
</mat-error>


<br>

<button mat-button type="submit" class="btn btn-primary btn-lg btn-block button-size" (click)="Logar()">Enviar</button>

<div class="space"></div>

Possible duplicate of [Angular 5 - form validation e-mail](https://stackoverflow.com/questions/49182864/angular-5-form-validation-e-mail) — Kiran Joshi, Oct 04 '18 at 07:22

score 0 · Answer 1 · answered Oct 03 '18 at 13:02

0

Try this out, we can have regex pattern to validate

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

answered Oct 03 '18 at 13:02

Pandiyan Cool

6,381
8
51
87

score 0 · Answer 2 · answered Oct 03 '18 at 13:06

0

You need to change your patterns, Kindly use the bellow pattern for email id.

Example valid email ID's:

sample@sam.com - Valid, sample@sam.in - Valid, sample@sam - Invliad.

pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"

answered Oct 03 '18 at 13:06

ksrider 148

55
1
11

Harun Or Rashid · Answer 3 · 2018-10-03T13:23:53.870

0

Try the regex

emailFormControl: new FormControl('', Validators.compose([Validators.required, Validators.pattern(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)])),

edited Oct 03 '18 at 13:23

answered Oct 03 '18 at 13:11

Harun Or Rashid

5,589
1
19
21

Updated my regex. Can you please check now? – Harun Or Rashid Oct 03 '18 at 13:25
ERROR in src/app/app.component.ts(96,25): error TS1005: '(' expected. src/app/app.component.ts(96,36): error TS1005: '=' expected. src/app/app.component.ts(96,258): error TS1005: ';' expected. Date: 2018-10-03T13:27:03.313Z - Hash: 0aa142bd0a2f8edcc4ec - Time: 546ms – Marck Oct 03 '18 at 13:28

score 0 · Answer 4 · answered Oct 03 '18 at 13:16

 Either you can user HTML5 type attribute as email like type="email"
            <div class="form-group">
              <input class="form-control text-sm-x2 pl-5" placeholder="Email Id" type="email" name="email" [(ngModel)]="userCredentials.email"
                [disabled]="disableInputs" required email #email="ngModel">
              <span class="help-block" *ngIf="email?.dirty && email?.errors?.email" style="color:red">
                <small>Enter a valid email</small>
              </span>
            </div>
  OR
use pattern attribute like:
pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" with default type="text".

Raja Mohamed · Answer 5 · 2018-10-04T07:06:19.083

0

Try this simple regex,

if (emailString.match(/[A-Za-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[A-Za-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9A-Z](?:[a-z0-9A-Z]*[a-z0-9A-Z])?\.)+[a-z0-9A-Z](?:[a-z0-9A-Z]*[a-z0-9A-Z])?/)) {
    return null;
  } else {
    return { 'invalidEmailAddress': true };
  }

Check this Stackblitz sample demo

edited Oct 04 '18 at 07:06

answered Oct 03 '18 at 13:48

Raja Mohamed

1,026
9
22

Attached a sample in stackblitz – Raja Mohamed Oct 04 '18 at 07:07
I hope it will help you. – Raja Mohamed Oct 04 '18 at 07:10

score 0 · Answer 6 · answered Oct 04 '18 at 07:19

Prefer the Email Validator provided by Angular.

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

Reference:

https://angular.io/api/forms/EmailValidator

How to validate e-mail with Angular 5

6 Answers6