What's the point of $validators and $setValidity? - angularjs

Question

I think I'm missing something with $validators and $setValidity (which I understand, do the exact same thing so you don't need both - please correct me if I'm wrong). Whether I have the $validators statement in there or not, I get the ng-invalid class added to the input form, which is adding a red border around the input. So why do I need the $validators? I am trying to set the parent form to be invalid if a user does not select a row from the dropdownnin the directive template. I don't want to show any error messages or anything, I just want to add the invalid class and red border based on if a row in the dropdown was selected.
Should I be using $validators or $setValidity? Do I need both $validator and $setValidity like I have below? Also, does $setValidity required ngModelCtrl or not? I get undefined for setValidity if it is not inside the $validators function. Any help is appreciated.
If I want to make the parent form invalid as a whole if no selection is made and I am getting ng-invalid class when I touch and then blur if no selection is made without $validators and $setValidity, then why do I need the $validators and $setValidity??
index.html
<form name="myForm">
<validator
rows="[{name:'tom', city:'san fran', state: 'mn', zip: 34212},
{name: 'joe', city:'san fran', state: 'mn', zip: 45675}]"
ng-required="true"
ng-model="hey">
</validator>
</form>
validate.js - DDO
return {
restrict: 'E',
require: {
ngModelCtrl: 'ngModel',
formCtrl: '?^form'
},
replace: true,
templateUrl: 'view.html',
scope: {},
controllerAs: 'ctrl',
bindToController: {
rows: '=',
onSelected: '&?', //passsed selected row outside component
typedText: '&?', //text typed into input passed outside so
//developer can create a custom filter,
//overriding the auto
textFiltered: '#?', //text return from the custom filter
ngRequired: "=?" //default false, when set to true the component
//needs to validate that something was selected on blur.
//The selection is not put into the input element all the
//time so it can't validate based on whether or not
//something is in the input element itself.
//I need to validate inside the controller where I can see
//if 'this.ngModel' (selectedRow - not passed through scope)
//is undefined or not.
},
controller: 'validatorController'
};
.
function validatorController () {
var ctrl = this;
var rowWasSelected = false;
var input = ctrl.formCtrl.inputField;
//called via ng-click on the dropdown row
//if this is called a row was selected
ctrl.rowSelected = function (row){
rowWasSelected = true;
}
//called via ng-blur of the input element
ctrl.ngModelCtrl.$validators.invalidInput = function (modelValue, viewValue) {
return rowWasSelected;
}
ctrl.$onInit = $onInit; //angular will execute this after
//all conrollers have been initialized, only safe to use
//bound values (through bindToController) in
//the $onInit function.
//i understand this need to be there with Angular 1.5
//using ngModel in the controller
//but I really only need to validate on ng-blur of the input
function $onInit() {
ctrl.validateInput();
}
}
};
}
view.html - template for directive
<div class="dropdown" ng-class="{'open' : ctrl.isOpen}">
<div class="form-group">
<input type="text" class="form-control" name="inputField"
placeholder="select" ng-click="ctrl.openDropdown()"
ng-blur="ctrl.validateInput()"
ng-model="ctrl.currentRow.name"
ng-required="ctrl.ngRequired">
</div>
<ul class="dropdown-menu list-group">
<li class="list-group-item" ng-repeat="row in ctrl.rows"
ng-click="ctrl.onSelectedLocal(row)">
{{row.name}}
</li>
</ul>
</div>
I must be getting the invalid class regardless of the $validators function I have because it is adding the ng-invalid class whether its there or not??

Answer 1

$setValidity(validationErrorKey, isValid);
Change the validity state, and notify the form.
This method can be called within $parsers/$formatters or a custom validation implementation. However, in most cases it should be sufficient to use the ngModel.$validators and ngModel.$asyncValidators collections which will call $setValidity automatically.1