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

Question

我正在 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]

Answer 1

你在这里：

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

ng-class检查输入是否有效和returns两个对应的类 for .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.

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

Allow user to click a button only when email is valid

javascript

angularjs

angularjs-scope

ng-class