如何在 angularjs 表单字段中输入多个电子邮件 ID？

Question

我想要一个 angularjs 形式的表单字段，这样我就可以输入多个用逗号分隔的电子邮件 ID，并以数组形式在 $scope 对象中更新它们。 例如。在表单字段中，我输入了电子邮件 ID：ads@gmail.com、aman@gmail.com、qaz@yahoo.com 现在在我的 $scope 变量（比如'$scope.emails'）中，我希望它们像 ["ads@gmail.com", "aman@gmail.com", "qaz@yahoo.com"] 一样更新为 POST表格。 我是 angularjs 的初学者并停留在这个阶段。请帮助我摆脱这种情况。

Answer 1

我认为@Leon li 的解决方案是一个不错的解决方案，但要添加替代方案，您可以使用 REGEX 在将字段输入发送到服务器之前对其进行处理。

/\s*(?:([a-z0-9.!#$%&’*+=?^_`{|}~-]+@(?:[a-z0-9-]+\.){1,3}(?:[a-z0-9-]+)(?::[0-9]+)?))\s*/gi

该表达式几乎可以接受任何类型的电子邮件，并且每个匹配项都将被放入其自己的匹配组中。然后你会像这样处理它：

function processEmails (fieldValue)
{
  var output = [];
  var match = fieldValue.match (emailRegex);

  if (!match)
  {
    //No emails entered. Handle error here
  }
  else
  {
    //The first index (0) is not a matching group
    for (var i = 1; i < match.length; i++)
    {
      output.push (match[i]);
    }
  }

  return output;
}

测试：https://regex101.com/r/glZrjC/1

Answer 2

您可以为此使用ng-tags-input

或使用此代码

return text.split(",");

在 ng-model setter getter 或任何事件中

Answer 3

你可以

1. 将表单字段值（ng-model）绑定为$scope.emailField。
2. 使用ng-blur在作用域上绑定一个函数来解析$scope.emailField的值（以逗号分隔）
3. 将结果数组分配回您的$scope.emails。