Валидатор электронной почты Angular с пробелами

Я разрабатываю новое приложение на основе Angular с формой входа на основе электронной почты и пароля.

У него есть форма для этих полей, определяемая следующими строками:

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

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

Он работает так, как ожидалось, за исключением одной ситуации:

Когда пользователь использует автозаполнение Samsung (и других) для заполнения поля электронной почты, он вставляет пустое место после электронного письма, а Validators.email предполагает, что это недействительный адрес электронной почты.

У меня вопрос, как я могу решить эту конкретную ситуацию?

Я почти уверен, что могу просто добавить существующее регулярное выражение для проверки электронной почты, но я ненавижу изобретать колесо, если валидатор существует, создание другого выглядит безумным.

Можно ли реализовать какой-то валидатор, который изменяет мое значение элемента управления формой, удаляя пробелы?


angular angular-reactive-forms angular-validation
person Elias Soares    schedule 19.03.2018    source источник
comment
Валидатор Angular по умолчанию недостаточно силен, по крайней мере, для меня. Я бы написал собственный валидатор и воспользовался этим, чтобы обрезать   -  person Vega    schedule 20.03.2018
comment
вы можете написать свой собственный валидатор, а затем отправить строку с пробелом в конце. Но я думаю, у вас может возникнуть другая проблема. Потому что вам нужно проверить его на сервере, а это означает, что вам все равно нужно удалить пробелы. Вот почему лучше удалить его сейчас в пользовательском интерфейсе. Вы можете использовать this.form.valueChanges.map ((value) = ›{this.form.valueChanges .map ((value) =› {// Здесь вы можете управлять своим значением return value.trim ();})   -  person Roman Skydan    schedule 20.03.2018

Ответы (2)


arrow_upward
0
arrow_downward

Я не понимаю, почему вы просто не используете его с помощью обычного javascript, прежде чем делать с ним другие вещи.

Вы можете сопоставить конец строки с помощью регулярного выражения / $ /, я бы использовал / \ s {1,} $ /, чтобы вы поймали любые «пробельные» символы, равные единице или больше. Существуют валидаторы электронной почты, но, конечно, вам нужно сначала избавиться от пробелов в конце.

Я думаю, что обучение регулярному выражению будет вне области видимости, но именно так я бы справился с ошибочным вводом из автозаполнения.

другое предложение - отключить автозаполнение, чтобы не было случайных вещей, но это просто раздражало бы пользователя (это раздражает меня).

person Alex Mackinnon    schedule 19.03.2018

arrow_upward
6
arrow_downward

Я испытал то же самое.

Для всех, кто все еще сталкивается с этой проблемой;

добавление type="email" к вашему <input> в сочетании с Validators.email должно помочь.

person Fer Bastiaens    schedule 30.09.2019
comment
Это действительно трюк с Chrome, но не с FF или IE. - person Vilmantas Baranauskas; 19.06.2020