我的页面上有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/

10-12 15:20