必要なバリデーターを変更する方法

Question

私のページには3つのフィールドがあります。会社名、名字、姓など、それぞれの入力フィールドに応じて必要なものにしたいと考えています。 ユーザーが会社名を入力すると、FirstNameとLastNameは必須フィールドとして無視され、FirstNameとLastNameが入力された場合、CompanyNameは必須フィールドではありません。ここで

ここで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>