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

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

Answer 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>

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

更新

2 个答案: