Angular 带空格的电子邮件验证器

Question

我正在开发一个新的基于 Angular 的应用程序，其登录表单基于电子邮件和密码。

它有一个用于这些字段的表单，由以下行定义：

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

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

除一种情况外，一切正常：

当用户使用三星（和其他公司）的自动完成功能填写电子邮件字段时，它会在电子邮件后插入一个空的 space，并且 Validators.email 假定它是无效的电子邮件。

我的问题是如何解决这种特殊情况？

我很确定我可以只放置一些 现有的电子邮件验证正则表达式 ，但我不想重新发明轮子，如果验证器存在，创建另一个看起来很疯狂。

是否可以实施某种验证器来修改我的表单控件值，去除白色spaces?

Answer 1

我不明白你为什么不在用它做其他事情之前用正则表达式 javascript 来表达它。

您可以使用正则表达式 /$/ 匹配字符串的末尾，我会使用 /\s{1,}$/ 这样您就可以捕获一个或更大的 "whitespace" 个字符。那里有电子邮件验证器，但当然你需要在最后首先去掉白色的 space 。

我认为教授正则表达式超出了范围，但这就是我处理自动完成的杂散输入的方式。

另一个建议是关闭自动完成，这样你就不会得到杂散的东西，但这只会惹恼用户（这让我很恼火）。

Answer 2

我也有过同样的经历。

对于仍然遇到这个问题的每个人；

将 type="email" 添加到您的 <input> 并结合 Validators.email 应该可以解决问题。

Angular 带空格的电子邮件验证器

Angular email validator with whitespaces

angular-validation

angular

angular-reactive-forms