0

我有下面的 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}} 变量。也许我不明白一些事情。

4

2 回答 2

1

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

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

<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对象是 angFormController并且userEmail是ngModelController。请阅读表单的开发者指南

于 2013-11-05T10:04:16.087 回答
1

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

<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;
}

你在这里有一个工作的笨蛋

于 2013-11-05T10:06:29.867 回答