Email validation in angular

<pre lang="HTML">
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Employee Detail</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">


          <form [formGroup]="formValue">
            <div class="mb-3">
              <label for="exampleInputEmail1" class="form-label">First Name</label>
              <input type="text" formControlName="firstName" class="form-control" id="exampleInputEmail1"
                aria-describedby="emailHelp">
              
                First Name
                required
            </div>
            <div class="mb-3">
              <label for="exampleInputPassword1" class="form-label">Last Name</label>
              <input type="text" formControlName="lastName" class="form-control" id="exampleInputPassword1">
              Last
                Name
                required
            </div>
            <div class="mb-3">
              <label for="exampleInputPassword1" class="form-label">Email</label>
              <input type="email" formControlName="email" class="form-control" id="exampleInputPassword1">



              <div class="text-danger"
                *ngIf="(formValue.controls['email'].dirty || formValue.controls['email'].touched)">
                <span *ngIf="formValue.hasError('required','email')">email required</span>
                <span *ngIf="formValue.hasError('pattern','email')">invalid email</span>
                <span></span>
              </div>




            </div>
            <div class="mb-3">
              <label for="exampleInputPassword1" class="form-label">Mobile</label>
              <input type="text" formControlName="mobile" class="form-control" id="exampleInputPassword1"
                maxlength="10">
              Mobile
                number required
            </div>
            <div class="mb-3">
              <label for="exampleInputPassword1" class="form-label">Salary</label>
              <input type="text" formControlName="salary" maxlength="7" class="form-control" id="exampleInputPassword1">
              Salary

                required
            </div>
          </form>

ngOnInit(): void {
    this.formValue = this.formbuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      email: [
        '',
        Validators.required,
        Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$'),
      ],
      mobile: ['', Validators.required],
      salary: ['', Validators.required],
    });
    this.getAllEmployee();
  }
  
in angular validation for email not work please suggest