AngularJS未验证表单中的电子邮件字段

我有下面的html，其中有一个表单，我想提交给AngularJS控制器

<div class="newsletter color-1" id="subscribe" data-ng-controller="RegisterController">
  <form name="registerForm">
    <div class="col-md-6">
     <input type="email" placeholder="your@e-mail.com" data-ng-model="userEmail" required class="subscribe">
   </div>
    <div class="col-md-2">
    <button data-ng-click="register()" class="btn btn-primary pull-right btn-block">Subsbcribe</button>
    </div>
  </form>
 </div>

---

问题是，当我单击按钮时，没有进行任何验证。虽然我没有提供正确的电子邮件，但它始终被路由到控制器。因此，每次单击按钮时，都会显示{{ThankYou}}变量。也许我不明白什么。

AngularJS没有禁用表单验证的任何功能。is所做的是，它使表单的状态及其在验证方面的控件在当前范围内可用。您需要自己实施该行为

在您的情况下，如果您需要检查用户电子邮件是否有效，您的html输入应该有一个名称属性，如

<input type="email" placeholder="your@e-mail.com" data-ng-model="userEmail" required class="subscribe" name='userEmail'>

---

基本上，

registerForm

对象是

ngFormController

，

userEmail

是

ngModelController

。请阅读《开发者指南》

您缺少实现所需的部分。通常，您需要添加一些代码来根据表单的状态（即有效/无效）启用或禁用提交按钮。在您的情况下，可以这样做：

<button data-ng-click="register()" class="btn btn-primary pull-right btn-block" ng-disabled="registerForm.$invalid">Subsbcribe</button>

input.ng-invalid-required {
  background-color: #FA787E;
}

或者像这样使用CSS：

<button data-ng-click="register()" class="btn btn-primary pull-right btn-block" ng-disabled="registerForm.$invalid">Subsbcribe</button>

input.ng-invalid-required {
  background-color: #FA787E;
}

---

如果您需要访问angular的FormController（带有所有

$invalid

，

$pristite

等属性的

registerForm

属性），只需将

数据ng controller=“RegisterController”

放在表单元素上，就可以使用plunker。这样，您的控制器和指令将共享相同的

$scope

，您将可以从

RegisterController

代码中访问

$scope.RegisterPerform

。感谢您的帮助以及与其他信息的链接。它按预期工作。我只需将

novalidate

添加到表单中，使其不显示html 5错误。与传统表单没有什么不同。。如果没有

名称

字段将永远不会提交，因此不需要验证

input.ng-invalid-required {
  background-color: #FA787E;
}