僅在輸入文本字段時如何使按鈕可單擊

Question

我有一個文本字段可輸入emailId..Iam將該值存儲在$rootScope.emailId 。 現在，當我單擊“提交”按鈕時，僅當輸入了emailId時，我才必須進入下一頁，否則它必須發出警告說必須填寫。 目前它處於表單中，我正在使用required="true"和form.$valid但仍然無法正常工作，是否還有其他方法可以實現此目的。

<form name="customerForm" class="form-horizontal">
    <div class="form-group">
        <label for="inputEmail" class="col-lg-4 col-lg-offset-1  control-label">Email address</label>
        <div class="col-lg-4">
            <input class="form-control" ng-model="$root.customerDetails.eMail" placeholder="Enter customer email" type="email" required focus value="{{emailId}}">
        </div>
    </div>
</form>

-

<div class="col-lg-1">
    <button type="submit" class="btn btn-primary right-button" ng-click="$ctrl.proceedToPaymentDetails()" ng-disabled="$ctrl.customerDetails">Next</button>
</div>

目前，表單和按鈕不在同一個html頁面中。無法通過任何方法解決此問題。

Answer 1

更改ng-disabled="customerForm.$invalid"或者您也可以在procedToPaymentDetails（）方法內檢查電子郵件ID的值以獲取警報消息。

Answer 2

請拋出此示例代碼，以使您更好地理解

<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
        Email:<br>
    <input type="text" ng-model="user.emailID">
    <br><br>
    <button ng-click="proceedToPaymentDetails()">Next</button>
  </form>
  <p>form = {{user}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.user = {firstName:"", lastName:"",emailID:""};
    $scope.proceedToPaymentDetails = function() {
        alert($scope.user.emailID);
    };
});
</script>

</body>
</html>

僅在輸入文本字段時如何使按鈕可單擊

問題描述

2 個解決方案

解決方案1
0 2016-10-14 11:25:15

解決方案2
0 2016-10-17 10:52:28

僅在輸入文本字段時如何使按鈕可單擊

問題描述

2 個解決方案

解決方案1 0 2016-10-14 11:25:15

解決方案2 0 2016-10-17 10:52:28

解決方案1
0 2016-10-14 11:25:15

解決方案2
0 2016-10-17 10:52:28