Angular email validator with whitespaces

Question

I'm developing a new Angular based application, with a login form based on email and password.

It have a form for these fields, defined by the following lines:

let formConfig = {
  email: ['', [Validators.required, Validators.email]],
  password: ['', [Validators.required]],
};

this.form =  this.formBuilder.group(formConfig)

It works just as expected, except for one situation:

When the user uses Samsung's (and others) autocompletes to fill the email field, it inserts an empty space after the email, and the Validators.email assumes that it's an invalid email.

My question is how can I solve this particular situation?

I'm pretty sure that I can just put some existing email validation regex, but I hate to reinvent the wheel, if the validator exists, creating another one looks crazy.

It's possible to implement some kind of validator that modifies my form control value stripping out whitespaces?

Angular default validator is not 'strong' enough, at least for me. I would write a custom validator and take advantage of that to trim — Vega
you can write your own validator and then send a string with space on the end. But I think you can get another problem. Because you need to validate it on the server to and this means that you still have to remove whitespace. That's why better remove it now on UI. You can use this.form.valueChanges.map((value) => {this.form.valueChanges .map((value) => { // Here you can manipulate your value return value.trim(); }) — Roman Skydan

Fer Bastiaens Fer Bastiaens · Accepted Answer · 2019-09-30T13:17:26

I experienced the same.

For everyone still encountering this issue;

adding type="email" to your <input> in combinitation with Validators.email should do the trick.

Angular email validator with whitespaces

2 Answers