Angular Reactive Form - convert email address to lowercase on submit

Issue

In my reactive form I allow users to enter email addresses where the text before the '@' can contain uppercase characters. However I want to convert say 'DAve@gmail.com' (which is valid) to 'dave@gmail.com' onSubmit.

I have tried creating a separate function, which converts the input to lowercase within onSubmit, tried to call toLowerCase() on the getter, and call toLowerCase() within the FormBuilder, however they all cause errors or the form is invalid.

I'm sure it's something simple but I'm a little stuck...

FORMBUILDER

this.firstFormGroup = this._formBuilder.group({
    email: [this.user.email, [Validators.required, Validators.email, Validators.pattern('^[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$')]]
});

GETTER

get email() {
        return this.firstFormGroup.get('email');
    }

ONSUBMIT

this.user.lastName = this.firstFormGroup.controls['email'].value;

Solution

You should use toLowerCase() in value of form controls as

this.user.lastName = this.firstFormGroup.controls['email'].value.toLowerCase();

Answered By - Hien Nguyen