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

Question

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

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

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

在 Controller 中:

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 。