I have a form with several fields, however the selection and input fields are connected: the input check depends on what value the user selects in the selection field.
I will try to clarify an example. Let's say that select contains the names of the planets:
<select id="planet" class="form-control" name="planet" ng-model="planet" ng-options="c.val as c.label for c in planets"></select>
at the input, I apply custom validation using a custom directive called "input-validation":
<input id="city" input-validation iv-allow-if="planet==='earth'" class="form-control" name="city" ng-model="city" required>
where is the directive:
.directive('inputValidation', [function() { return { require: 'ngModel', restrict: 'A', scope: { ivAllowIf: '=' }, link: function(scope, elm, attrs, ctrl) { ctrl.$parsers.unshift(function(viewValue) { //input is allowed if the attribute is not present or the expression evaluates to true var inputAllowed = attrs.ivAllowIf === undefined || scope.$parent.$eval(attrs.ivAllowIf); if (inputAllowed) { ctrl.$setValidity('iv', true); return viewValue; } else { ctrl.$setValidity('iv', false); return undefined; } }); } }; }])
A full example can be viewed in Plnkr: http://plnkr.co/edit/t2xMPy1ehVFA5KNEDfrf?p=preview
Whenever the selection changes, I need to enter the confirmation again. This does not happen in my code. What am I doing wrong?
source share