仅当电子邮件有效时才允许用户单击按钮答案

【问题标题】：Allow user to click a button only when email is valid仅当电子邮件有效时才允许用户单击按钮
【发布时间】：2015-04-25 12:21:49
【问题描述】：

我在 Web 应用程序上使用 angularjs。我正在尝试执行一些非常简单的事情。我有一个电子邮件input 和一个button。我只希望在输入有效电子邮件后启用按钮的功能。我试过了：

<div>
    <p class="required">*</p>
    <input type="email" ng-model="email" placeholder="Enter Email" required>
</div>

<div class="btn-container" ng-class={true : 'validEmail', false : 'invalidEmail'}[email]>
    <div class="btn-go" ng-click="findUser();">Go!</div>
</div>

默认情况下，我希望按钮为蓝色。但是一旦输入了有效的电子邮件，按钮就会变成绿色。因此：

ng-class={true : 'validEmail', false : 'invalidEmail'}[email]

【问题讨论】：

按钮使用<button> 和ng-disabled。
@valverde93 - 谢谢，但是如何将 ng-disabled 链接到电子邮件字段验证？？
我会在几分钟后发布示例
示例here
请记住，您需要在三元运算符周围加上引号，否则它将不起作用，因此 ng-class={true : 'validEmail', false : 'invalidEmail'}[email] 应该是 "ng-class={true : 'validEmail', false : 'invalidEmail'}[email]"。

标签： javascript angularjs angularjs-scope ng-class

【解决方案1】：

你在这里：

 ng-class="myForm.input.$valid ? 'valid' : 'invalid'"

ng-class 检查输入是否有效，并返回.valid 和.invalid 对应的两个类。

此时您可以使用 CSS 应用样式：

.valid {
  background: green;
}

.invalid {
  background: blue;
}

HTML 应该是这样的：

<form name="myForm" ng-controller="ExampleController">
  <label>Email:
    <input type="email" name="input" ng-model="email.text" required>
  </label>
  <div role="alert">
    <span class="error" ng-show="myForm.input.$error.required">
        Required!</span>
    <span class="error" ng-show="myForm.input.$error.email">
        Not valid email!</span>
  </div>
  <tt>text = {{email.text}}</tt>
  <br/>
  <button ng-class="myForm.input.$valid ? 'valid' : 'invalid'">Submit</button>
</form>

在控制器中：

var app = angular.module('plunker', []);

app.controller('ExampleController', ['$scope', function($scope) {
  $scope.email = {
    text: 'me@example.com'
  };
}]);

如果输入无效，您还可以在按钮上使用ng-disabled="myForm.input.$invalid" 使其无法使用。

查看Example。

资源：input[email]、The many ways to use ngClass、ngDisabled。

【讨论】：