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

Question

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

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

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

<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 内置错误消息。如果我删除它，我得到

而不是

Answer 1

看，电子邮件类型是 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>

Answer 2

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

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

AngularJS show email field error on submit?

javascript

forms

validation

angularjs

ng-pattern

更新