Reactive form email validation in angular 7 - angular6

Question

I am new in angular.Email validation is not working in my reactive form validation. I have an error somewhere, but I'm not sure what it is.
Script:
this.loginForm = this.formBulder.group({
fname:['', Validators.required],
lname:['', Validators.required],
email:['', Validators.required],
password:['', Validators.required,Validators.maxLength(5)],
retypepassword:['', Validators.required,Validators.maxLength(5)]
});
https://stackblitz.com/edit/angular-forms-validation-tfzhug?file=app/app.component.html

Answer 1

try to this way
const emailPattern = '[a-zA-Z0-9.-_]{1,}#[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,63}';
mail = new FormControl('',Validators.compose( [Validators.required,Validators.pattern(emailPattern)]));

Answer 2

ts code
import { Component, OnInit } from '#angular/core';
import { FormGroup, FormBuilder, Validators} from '#angular/forms';
import { UserService } from '../../shared/services/user.service';
const EMAIL_REGEX = /^(([^<>()\[\]\\.,;:\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,}))$/;
#Component({
selector: 'forget-password',
templateUrl: './forget-password.component.html',
styleUrls: ['./forget-password.component.css']
})
export class ForgetPasswordComponent implements OnInit {
form: FormGroup = new FormGroup({});
errors:any;
failed:boolean=false;
success:boolean=false;
constructor(private userService: UserService,private fb: FormBuilder) {
this.form = this.fb.group({
email: ['', [Validators.required, Validators.email, Validators.pattern(EMAIL_REGEX)]]
});
}
ngOnInit() {
}
get f() {
return this.form.controls;
}
isFieldValid(field: string) {
return (
(this.form.get(field).touched ||
this.form.get(field).untouched) && this.form.get(field).valid
);
}
forgetPassword() {
this.failed=false;
this.success=false;
this.userService.forgetPassword(this.form.value).subscribe(result=>{
this.success=true;
this.form.reset();
},errors=>{
this.failed=true;
this.errors=errors;
})
}
}
View
<form [formGroup]="form" (ngSubmit)="forgetPassword()">
<div class="md-form form-sm mb-2">
<i class="fa fa-envelope prefix"></i>
<input type="text" class="form-control" formControlName="email" type="email"
placeholder="Enter Your Email Address">
<div *ngIf="f.email.touched && f.email.invalid" class="text-danger">
<div *ngIf="f.email.errors.required">Email is required.</div>
<div *ngIf="f.email.errors.email">Email must be a valid email address</div>
</div>
</div>
<div class="text-center mt-2">
<button class="btn btn-primary" type="submit" [disabled]="!form.valid">Send Password Reset Email
<i class="fa fa-sign-in ml-1"></i>
</button>
</div>
<div *ngIf="failed" class="text-danger" role="alert">
<strong>Oops! </strong> <span *ngFor="let error of errors">{{error}}</span>
</div>
<div *ngIf="success" class="alert alert-success" role="alert">
Successfully change your password
</div>
</form>

Answer 3

you can try this :
this.loginForm = this.formBulder.group({
'fname': new FormControl('',Validators.required),
'lname': new FormControl('',Validators.required),
'email': new FormControl('',[Validators.required,Validators.email]),
'password': new FormControl('',[Validators.required,Validators.maxLength(5)]),
'retypepassword': new FormControl('',[Validators.required,Validators.maxLength(5)]),
});