所以我有一个表单，需要数据和控制器访问它，但如果用户点击按钮而没有填写所有字段，我会收到错误，所以我想禁用Proceed按钮，直到用户输入全部田野。我该如何实现这一目标？字段在div中，我尝试包装下面的所有div，包括表单中的按钮，但无法使其工作。我见过其他这样的例子，但他们没有使用ng-click。
<form novalidate name="passengerForm">
<div class="col-md-12">
<div class="booking-details-container">
<div class="row">
<div class="col-md-12">
<h4 class="text-primary">
<strong>Contact Person Details</strong>
</h4>
</div>
</div>
<div class="row">
<div class="col-md-4">
<label for="">Contact Name <font color="red">*</font><input type="text"
ng-model="contactName" class="form-control-sm">
</label>
</div>
<div class="col-md-4">
<label for="">Email <input type="email"
ng-model="contactEmail" class="form-control-sm">
</label>
</div>
<div class="col-md-4">
<label for="">Number <font color="red">*</font><input type="text" id="contactNo" ng-model="contactNumber"
class="form-control-sm">
</label>
</div>
</div>
<div class="divider-h"></div>
<div data-ng-repeat="passenger in passengerList track by $index">
<div class="row">
<div class="col-md-12">
<h4 class="text-primary">
<strong>Passenger Details</strong>
</h4>
</div>
<div class="col-md-3">
<label for="">Type <font color="red">*</font><select type="text"
ng-model="passenger.paxType" class="form-control-sm" ng-disabled="true">
<option value="ADULT" ng-selected="passenger.paxType == 'ADULT'" >Adult</option>
<option value="CHILD" ng-selected="passenger.paxType == 'CHILD'">Child</option>
<!-- <option value="INFANT">Infant</option> -->
</select>
</label>
</div>
<div class="col-md-3">
<label for="">Title <font color="red">*</font><select type="text"
ng-model="passenger.title" class="form-control-sm">
<option value="Mister">Mr.</option>
<option value="Miss">Ms.</option>
<option value="Mrs" ng-show="passenger.paxType == 'ADULT' " >Mrs.</option>
</select>
</label>
</div>
<div class="col-md-3">
<label for="">First Name <font color="red">*</font><input type="text"
ng-model="passenger.firstName" class="form-control-sm"></label><br>
</div>
<div class="col-md-3">
<label for="">Last Name <font color="red">*</font><input type="text"
ng-model="passenger.lastName" class="form-control-sm"></label>
</div>
<div class="clearfix"></div>
<div class="col-md-4">
<label for="">Nationality <font color="red">*</font><select type="text"
ng-model="passenger.nationality" class="form-control-sm">
<option value="" selected disabled>Select
Nationality</option>
<option value="NP">Nepalese</option>
<option value="IN">Indian</option>
<%-- <c:forEach var="nationality" items="${nationality}">
<option value="NP">${nationality}</option>
</c:forEach> --%>
</select>
</label>
</div>
<div class="col-md-8">
<label for="">Remarks <input type="text"
ng-model="passenger.paxRemarks" class="form-control-sm">
</label>
</div>
</div>
<div class="divider-h"></div>
</div>
<div class="row">
<div class="col-md-12 text-right">
<!-- <button class="btn btn-xs btn-default">+ Add Passenger</button> -->
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-2 pull-right" style="margin-top: 20px;">
<button ng-disabled="invalid" type="button" class="btn btn-primary btn-block" ng-click="proceedARS()">{{loadingButtonProceed}}</button>
</div>
</form>
Controller.js：
我的controller.js实际上是数千行代码，我刚刚包含了相关部分：
$scope.$watch('passengerForm.$invalid',function(x,y){ $scope.invalid = $scope.passengerForm.$invalid; }, true)
$scope.proceedARS = function () {
$scope.ARSMessage = '';
if ($scope.contactName === undefined || $scope.contactName === null || $scope.contactName === "") {
$scope.ARSMessage = 'Please fill all the required fields';
return;
}
if ($scope.contactEmail === undefined || $scope.contactEmail === null || $scope.contactEmail === "") {
$scope.contactEmail = "";
}
if ($scope.contactNumber === undefined || $scope.contactNumber === null || $scope.contactNumber === "") {
$scope.ARSMessage = 'Please fill all the required fields';
return;
}
if ($scope.contactNumber.length != 9 && $scope.contactNumber.length != 10) {
$scope.ARSMessage = 'Contact Number Length Invalid';
return;
}
if ($scope.selectedOutbound == undefined || $scope.selectedOutbound == "" || $scope.selectedOutbound == null) {
$scope.ARSMessage = "Please select one of the flights for departure";
return;
}
if ($scope.flightAvailability.tripType == 'R') {
if ($scope.selectedInbound == undefined || $scope.selectedInbound == "" || $scope.selectedInbound == null) {
$scope.ARSMessage = "Please select one of the flights for arrival";
return;
}
}
$scope.loadingFunction();
答案 0 :(得分：0)
试试这个
<form name="myForm">
<input type="text" name="name" ng-model="name" required />
<button ng-disabled="{{ myForm.$invalid }}">Save</button>
</form>
答案 1 :(得分：0)
试试这个
function Controller($scope) {
$scope.save = function(user) {
console.log(user);
$scope.user = user;
};
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<html ng-app>
<div ng-app="demo1">
<div ng-controller="Controller">
<form novalidate name="myForm">
<input type="text" name="name" ng-model="data.name" required />
<input type="text" name="lastname" ng-model="data.lastname" required />
<button type="button" ng-disabled="myForm.$invalid"
ng-click="save(data)">Save</button>
</form>
{{user}}
</div>
</div>
</html>
答案 2 :(得分：0)
试试这个，
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="">
<p>Try writing in the input field:</p>
<form novalidate name="myForm">
<label>First Name</label>
<input name="fname" ng-model="fname" required>
<div ng-show="myForm.fname.$valid === false">Please enter first name</div>
<div></div>
<label>Last Name</label>
<input name="lname" ng-model="lname" required>
<div ng-show="myForm.lname.$valid === false">Please enter last name</div>
<button type="submit" ng-disabled="!myForm.$valid" >save</button>
</form>
</body>
我创建了plunker并且工作正常，
将required属性添加到所有必填字段。
<input type="text" ng-model="contactName" class="form-control-sm" required>