AngularJS在提交时显示电子邮件字段错误？答案

【问题标题】：AngularJS show email field error on submit?AngularJS在提交时显示电子邮件字段错误？
【发布时间】：2017-08-12 02:16:24
【问题描述】：

我在 Angular JS 1.5.11 中有一个表单。

我已将其设置为在提交表单时为空的必填字段显示错误消息。我需要添加也检测电子邮件在提交时是否有效的功能。

到目前为止，我无法让它工作。我尝试使用“内置”电子邮件字段验证，尝试使用 ng 模式。尽管如此，无论您在该字段中输入什么，它都不会显示错误。只有空字段显示错误。

<div class="row">
 <div class="col-md-12">
   <div class="form-group" ng-class="{ 'has-error' : abc.myForm.$submitted && abc.myForm.email.$error.required && abc.myForm.email.$error.pattern  }">
  <label>Email</label>
  <input type="email" name="email" class="form-control" ng-model="abc.user.email" ng-pattern="emailFormat" required>
  <p class="help-block error-block">Enter a valid email address.</p>
  </div>
 </div>
</div>

在https://plnkr.co/edit/3lAMOM3agSMGC9AAr2IT?p=preview查看整个表格

更新

为了澄清，我使用novalidate 是因为我不想使用 HTML5 内置错误消息。如果我删除它，我会得到

而不是

【问题讨论】：

从 plunkr 中，我刚刚从表单中删除了属性 novalidate，它对我有用。
我不想想要使用内置的错误显示，我想使用我自己的（Bootstrap 的）
plnkr.co/edit/9Na91wRtFhBnMNU6rc4O?p=preview 工作样本
是的，但是在 touched 上会这样做。您的 plunker 删除了 submitted 测试。

标签： javascript angularjs forms validation ng-pattern

【解决方案1】：

首先，很抱歉误解了这个问题。要获取表单内任何输入字段的状态，您可以使用$valid state。就像您的表单一样，您可以在表单中调用 {{abc.myForm.email.$valid}}，这将返回 true 或 false。

【讨论】：

这是 Angular 的方式，也是 OP 应该使用的方式！！ +1
谢谢。我最初发布的原因是 abc.myForm.email.$valid 与 abc.myForm.$submitted && abc.myForm.email.$error.required 相结合，我没有得到无效的回复。所以现在我使用了ng-pattern 和abc.myForm.$submitted && (abc.myForm.email.$error.required || abc.myForm.email.$error.pattern)，这也是（我假设）“Angular 方式”，但不同的方式。
@Steve 好！那么好，是的，我想知道你为什么不能实现你想要的，因为我个人也使用这种东西进行验证，而且我有必需和有效的参数来工作！
可能是我没有达到&& 和|| 的神奇组合并嵌套在() 中。这总是让我发疯。

【解决方案2】：

看，类型 email 是 HTML5 属性，如果你没有在表单中输入验证，HTML5 的默认验证将不起作用。从表单中删除 novalidate 并使用它。

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl as abc">
  <p>Hello {{abc.name}}!</p>
  <form name="abc.myForm" ng-submit="abc.save(abc.user)" >
    <div class="row">
      <div class="col-md-12">
        <div class="form-group" ng-class="{ 'has-error' : abc.myForm.$submitted && (abc.myForm.email.$error.required || abc.myForm.email.$error.pattern)  }">
          <label>Email</label>
          <input ng-pattern = '/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i' type="email" name="email" class="form-control" ng-model="abc.user.email" required="" />
          <p class="help-block error-block">Enter a valid email address.</p>
        </div>
      </div>
    </div>

    <p ng-show="abc.myForm.email.$error.pattern">
      Not valid email!
    </p>

    <input type="submit" class="btn btn-primary">

  </form>


</body>

</html>

【讨论】：

我不想想要使用内置的错误显示，我想使用我自己的（Bootstrap 的）
您更正的代码指出了我的错误。我忘记了我拥有的 ng 模式的 abc，它应该是 ng-pattern="abc.emailFormat"