Question

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

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

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

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

除了一种情况外，它的效果与预期一致：

当用户使用Samsung（和其他）自动填充功能填充电子邮件字段时，它会在电子邮件后插入一个空格，Validators.email会认为这是一封无效的电子邮件。

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

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

可以实现某种修改我的表单控件值的验证器来删除空格吗？

Answer 1

我也经历过同样的事情。

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

将type="email"与<input>一起添加到您的Validators.email中应该可以解决问题。

Answer 2

我不明白你为什么不在使用常规javascript之前使用常规javascript进行正则表达式。

您可以使用regex / $ /匹配字符串的末尾，我会使用/ \ s {1，} $ /，因此您可以捕获任何一个或更多的“空格”字符。有电子邮件验证器，但当然你需要在最后摆脱空白区域。

我认为教学正则表达式会超出范围，但这就是我如何处理自动完成的迷失输入。

另一个建议是关闭自动完成，这样你就不会得到流浪的东西，但这只会让用户烦恼（这让我很烦）..

带有空格的Angular电子邮件验证程序

2 个答案: