我的页面上有3个字段。我想根据彼此的输入字段来使它们为必填项。公司名称,名字和姓氏。
当用户输入“公司名称”时,应忽略“名字”和“姓氏”作为必填字段,如果输入“名字”和“姓氏”,则“公司名称”不是必填字段。
这是HTML
<div class="form-group" ng-class="{'has-error' : vm.isOwnerFNameLNameKeyed(vm.newAssignmentForm.OwnerFName,vm.newAssignmentForm.OwnerLName,vm.CompanyName)}">
<div class="col-sm-9">
<label for="inputPassword3" class="col-sm-3 control-label">Company Name</label>
<input id="CompanyName"
name="CompanyName"
type="text"
placeholder="Company Name"
ng-model="vm.CompanyName"
maxlength="50" class="form-control" ng-required="!vm.isOwnerFNameLNameKeyed(vm.newAssignmentForm.OwnerFName,vm.newAssignmentForm.OwnerLName,vm.CompanyName)"/>
</div>
</div>
<div class="form-group" ng-class="{'has-error' : !vm.isOwnerFNameLNameKeyed(vm.newAssignmentForm.OwnerFName,vm.newAssignmentForm.OwnerLName,vm.CompanyName)}">
<div class="col-sm-9">
<label for="inputPassword3" class="col-sm-3 control-label">Owner First Name</label>
<input id="OwnerFName"
name="OwnerFName"
type="text"
placeholder="First Name"
ng-model="vm.ownerFName"
maxlength="50"
class="form-control" ng-required ="!vm.isOwnerFNameLNameKeyed(vm.newAssignmentForm.OwnerFName,vm.newAssignmentForm.OwnerLName,vm.CompanyName)"/>
</div>
</div>
<div class="form-group" ng-class="{'has-error' : !vm.isOwnerFNameLNameKeyed(vm.newAssignmentForm.OwnerFName,vm.newAssignmentForm.OwnerLName,vm.CompanyName)}">
<div class="col-sm-9">
<label for="inputPassword3" class="col-sm-3 control-label">Owner Last Name</label>
<input id="OwnerLName"
name="OwnerLName"
type="text"
placeholder="Last Name"
ng-model="vm.ownerLName"
maxlength="50"
class="form-control" ng-required="!vm.isOwnerFNameLNameKeyed(vm.newAssignmentForm.OwnerFName,vm.newAssignmentForm.OwnerLName,vm.CompanyName)" />
</div>
</div>
这是js代码:
var isOwnerFNameLNameKeyed = function(ownerFName,ownerLName,ownerCompanyName) {
if (ownerFName !== undefined && ownerFName.length > 0 && ownerLName.length > 0) {
return true;
}
if (ownerCompanyName !== undefined && ownerCompanyName.length > 0) {
return true;
}
return false;
};
最佳答案
var app = angular.module('app', []);
app.controller('DomReadyCtrl', function($timeout, $scope){
$scope.vm = {};
});
angular.bootstrap(document.body, ['app'])
input:required {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="DomReadyCtrl">
Company name
<input id="CompanyName" ng-model="vm.CompanyName" ng-required="!vm.ownerFName || !vm.ownerLName"/>
<br />
ownerFName
<input id="ownerFName" ng-model="vm.ownerFName" ng-required="!vm.CompanyName"/>
<br />
ownerLName
<input id="ownerLName" ng-model="vm.ownerLName" ng-required="!vm.CompanyName"/>
<br />
{{vm}}
</div>
关于javascript - 如何更改 Angular 所需的验证器,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39538093/