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?

Answer 1

I don't see why you don't just regex it out using regular javascript before you do other things with it.

You could match on the end of the string using regex / $/, I would use the the /\s{1,}$/ so you catch any "whitespace" characters one or greater. There are email validators out there but of course you'd need to get rid of the white space first at the end.

I think teaching regex would be out of scope, but that is how I'd tackle the stray input from auto complete.

another suggestion is turning off auto complete so you don't get stray stuff but that would just annoy the user (it annoys me)..