Question

我在网络应用程序上使用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检查输入是有效还是无效，并返回.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 。

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

1 个答案: