仅在输入文本字段时如何使按钮可单击
[英]How to make a button clickable only if the textfield is entered
问题描述
I had a textfield to enter the emailId..Iam getting that value stored in $rootScope.emailId . 
我有一个文本字段可输入emailId..Iam将该值存储在$rootScope.emailId 。 Now when I click the submit button,I must take to next page only if the emailId is entered or else it must give an alert saying that must be filled. 现在，当我单击“提交”按钮时，仅当输入了emailId时，我才必须进入下一页，否则它必须发出警告说必须填写。 Currently it is in form and i am using required="true" and form.$valid but still its not working is there any other way to achieve this. 目前它处于表单中，我正在使用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>
Currently the form and the button are not in the same html page..Is der any way to fix this. 目前，表单和按钮不在同一个html页面中。无法通过任何方法解决此问题。
2 个解决方案
解决方案1
0 2016-10-14 11:25:15
更改ng-disabled="customerForm.$invalid"或者您也可以在procedToPaymentDetails（）方法内检查电子邮件ID的值以获取警报消息。
解决方案2
0 2016-10-17 10:52:28
Please gone throw this example code for your better understanding 请抛出此示例代码，以使您更好地理解
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.