Email validation in angular 6

Question

I am try to validate email required message show properly but valid message not display please give me any solution

<div class="form-group" [ngClass]="{  
'has-danger': ClientEmail1.invalid && (ClientEmail1.dirty || 
'has-success': ClientEmail1.valid && (ClientEmail1.dirty || 
<label class="form-control-label" 
<input type="email" class="form-control" emailvalidator id="email" name="email" [(ngModel)]="itemToEdit.ClientEmail1" 
<div class="form-control-feedback" *ngIf="ClientEmail1.errors && (ClientEmail1.dirty || <p *ngIf="ClientEmail1.errors.required">Email is 
<p *ngIf="ClientEmail1.errors.emailvalidator">Please provide a valid email 
</div>  
</div>

This answer might help you with it - https://stackoverflow.com/a/42366936/6891406 — KShewengger, Feb 06 '19 at 05:45

score 0 · Answer 1 · answered Feb 06 '19 at 06:46

If you are using the reactive form then you do it as below.

<form [formGroup]="registerForm" (ngSubmit)="register()">
    <label for="email">EMAIL: </label>
  <div class="form-group">
    <input
    type="email"
      [ngClass]="{
        'is-invalid':
          registerForm.get('email').errors && registerForm.get('email').touched
      }"
      class="form-control"
      formControlName="email"
      required
    />
    <div
      class="invalid-feedback"
      *ngIf="
        (registerForm.get('email').touched &&
        registerForm.get('email').hasError('required'))||(registerForm.get('email').touched &&
        registerForm.get('email').hasError('pattern'))
      "
    >
      Please provide a valid email 
    </div>
  </div>
</form>

And in your component

 ngOnInit() {
    this.registerForm = this.fb.group(
      {  
         email: ["",[Validators.required,
             Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')]]
      });
  }

Have a look at https://stackblitz.com/edit/angular-29njgn for demo

Hi @Akshay could you accept my answer if it is working? – Amir Feb 08 '19 at 16:26 — Amir, Feb 08 '19 at 16:26

Email validation in angular 6

1 Answers1