user1532976 user1532976 - 2 months ago 17
AngularJS Question

how to change required validator in angular

I have 3 fields on my page. I want to make them required depending on each other input fields.Company Name , FirstName and LastName.
When user enters Company Name, it should ignore FirstName and LastName as required fields and if FirstName and LastName are entered then CompanyName is not required field.

Here is 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>


Here is 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

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>