Question

我有一个使用AngularJS构建的注册表单，使用前端和后端（使用Express.js）输入验证。每当用户输入无效的电子邮件地址（例如 qwidjq＆amp; /％）时，我都会显示错误消息并将表单发回给用户。电子邮件输入字段应包含无效的电子邮件作为值。

问题是我无法使用无效的电子邮件值初始化input(type="email")字段。只有input(type="text")有效。这是一个example。

有关如何解决此限制的任何想法？我不想使用input(type="text")和自定义指令。我想保留input(type="email")，因为它会更改移动设备上的键盘布局。

提前致谢！

Answer 1

可能会在输入元素中显示坏文本NEXT，例如

<input type="email" /><span id="emailerror">qidjq&/% is not a valid address</span>

Answer 2

您可以通过使用数据初始化模型来初始化输入。

示例：http://plnkr.co/edit/TUJ6lv?p=preview

Answer 3

不幸的是，初始化模型以显示无效数据需要修补AngularJS。实际上，如果使用无效数据初始化任何经过验证的字段，它将显示为空白。

以下是导致电子邮件输入在没有有效电子邮件的情况下显示为空白的代码：

https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js （第622行）

  var emailValidator = function(value) {
    if (ctrl.$isEmpty(value) || EMAIL_REGEXP.test(value)) {
      ctrl.$setValidity('email', true);
      return value;
    } else {
      ctrl.$setValidity('email', false);
      return undefined;
    }
  };

Answer 4

请原谅我，如果我是愚蠢但是你不能在输入无效的情况下禁用表单上的按钮。或者，在您对ajax请求做出积极回应之前，请不要离开表单。如果您收到否定回复，则显示错误消息。数据仍然在表格中。我不熟悉Express.js所以也许这会迫使你刷新表单。我认为使用像Angular这样的框架的重点是让你完全控制UI。

如何在输入中初始化无效的电子邮件并显示（type =“email”）？

4 个答案: