Чтобы передать значение поля ввода строки типа в angular

У меня есть компонент customer, который используется для добавления новых клиентов. Код компонент выглядит следующим образом:

HTML

<div >
  <form [formGroup] = "addForm">

        <div>
          <mat-form-field>
            <input matInput placeholder = "First Name" formControlName = "firstname" required>
            <mat-error *ngIf = "addForm.controls.firstname.hasError('required')">
              Please enter first name
            </mat-error>
          </mat-form-field>
        </div>

        <div>
          <mat-form-field>
            <input matInput placeholder = "Last Name" formControlName = "lastname" required>
            <mat-error *ngIf = "addForm.controls.lastname.hasError('required')">
              Please enter last name
            </mat-error>
          </mat-form-field>
        </div>


        <div>
          <mat-radio-group formControlName = "gender">
            <div>Gender</div>
            <mat-radio-button  value = "Male">Male</mat-radio-button>
            <mat-radio-button value = "Female">Female</mat-radio-button>
          </mat-radio-group>
        </div>

        <div>
          <mat-form-field>
            <input matInput placeholder = "Email Address"  formControlName = "email" required>
            <mat-error *ngIf = "addForm.controls.email.hasError('required') ">
              Please enter email address
            </mat-error>
          </mat-form-field>
        </div>


    <div>
        <button mat-raised-button (click) = "onAdd()">ADD</button>
    </div>

  </form>

TS

  import { Component, OnInit, VERSION, ViewChild } from '@angular/core';
  import {
    FormBuilder,
    FormControl,
    FormGroup,
    Validators,
  } from '@angular/forms';
 import { Router } from '@angular/router';
 import { IContact } from 'src/app/models/app.models';
 import { CustomersService } from 'src/app/services/customers.service';

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

export class CustomerComponent implements OnInit {
 public addForm: FormGroup;
 public someContact: IContact;

 constructor(private fb: FormBuilder,
      public customersService: CustomersService) {}

public ngOnInit(): void {
 this.addForm = this.fb.group({
   firstname: [null, [Validators.required],
   lastname: [null, [Validators.required],
   email: ['', [Validators.required],
   gender: [null],

  });
 }

 public onAdd(): void {
   this.someContact = this.addForm.value;
   this.customersService.addCustomer(this.someContact);
 }


}

model.ts file

export interface IContact {
  firstName:      string;
  lastName:       string;
  gender:         string;
  eMailAddresses: string[];
}

Ожидаемый JSON после запроса POST:

 {
   "firstName": "Alfien",
   "lastName": "Urlich",
   "gender": "Male",
   "eMailAddresses": ["[email protected]"],
  }

Когда я заполняю все поля ввода форма и пытаюсь выполнить операцию http POST. Я получаю предупреждение как Плохой запрос из-за email. Ниже предупреждение:

Когда я выполняю операцию ПОЧТА без заполнения email(input field), POST проходит нормально, JSON выглядит следующим образом:

  {

   "firstName": "Lee",
   "lastName": "Cooper",
   "gender": "Male",
}

Что не так с кодом ??