javascript - 如何更改 Angular 所需的验证器

Question

我的页面上有 3 个字段。我想根据彼此的输入字段使它们成为必需的。Company Name 、 FirstName 和 LastName 。当用户输入公司名称时，应忽略名字和姓氏作为必填字段，如果输入名字和姓氏，则公司名称不是必填字段。

这是 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;
};

Answer 1

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>