To pass input field value of type string in angular

I have component called customer which is used to add new customers. The component code as follows:

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[];
}

The expected JSON after the POST request:

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

When i fill every input fields of the form and tried performing http POST operation. I am getting warning as Bad Request because of email. Below is the warning:

When i perform POST operation without filling email(input field) the POST happens fine, the JSON appears like this:

  {

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

What's wrong with the code ??