Question

我有下面的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>

控制器位于

之下

app.controller('RegisterController', function ($scope,dataFactory) {


$scope.users = dataFactory.getUsers();

$scope.register = function () {
    var userEmail = $scope.userEmail;
    dataFactory.insertUser(userEmail);
    $scope.userEmail = null;
    $scope.ThankYou = "Thank You!";
}
});

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

Answer 1

AngularJS不会禁用启用表单验证的任何功能。它的作用是，它使形式的状态及其在当前范围内可用的验证方面得到控制。您需要自己实施该行为。

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

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

然后在您的控制器上，您可以检查

$scope.registerForm.userEmail.$invalid财产。

您可以使用相同的属性来使用ng-disabled

禁用表单上的按钮

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

基本上registerForm对象是ngFormController，userEmail是ngModelController。请阅读forms

的开发者指南

Answer 2

你缺少一些能够实现你想要的东西。通常，您需要添加一些代码以启用禁用基于表单状态的提交按钮，即有效/无效。在你的情况下，这可以这样做：

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

注意ng-disabled="registerForm.$invalid"。

您还可以使用以下内容向用户提供内联反馈：

<input type="email" placeholder="your@e-mail.com" data-ng-model="userEmail" required="" class="subscribe" name="userName"/>
<span ng-show="registerForm.userName.$error.required">Please enter a name</span>

或者像这样的CSS：

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

你有一个工作的掠夺者here

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

2 个答案: