Email validation in angular 6 [duplicate]

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 - stackoverflow.com/a/42366936/6891406 — KShewengger
– KShewengger, Commented Feb 6, 2019 at 5:45

Amir · Accepted Answer · 2019-02-06 06:46:01Z

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

Collectives™ on Stack Overflow

Email validation in angular 6 [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related