Wie ändere ich die erforderlichen Validator in Winkel

Question

Ich habe 3 Felder auf meiner Seite. Ich möchte sie abhängig von den anderen Eingabefeldern erforderlich machen. Firmenname, Vorname und Nachname. Wenn der Benutzer den Firmennamen eingibt, sollte FirstName und LastName als erforderliche Felder ignoriert werden. Wenn Vorname und Nachname eingegeben werden, ist das Feld CompanyName nicht erforderlich.

Hier 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> 

Hier js Code:

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>