asyncValidator dependent on other field's value - angularjs

Question

I'm trying to add a validation field to one of my inputs, it should request the server whether the inputted VAT number is valid, so I'm using an async validator for this. Works fine with this code:
myApp.factory('isValidVat', function($q, $http) {
return function(vat) {
var deferred = $q.defer();
console.log(vat);
$http.get('/api/vat/' + vat).then(function() {
deferred.resolve();
}, function() {
deferred.reject();
});
return deferred.promise;
}
});
myApp.directive('validVat', function(isValidVat) {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
ngModel.$asyncValidators.vat = isValidVat;
}
};
});
<form name="form" novalidate ng-submit="check(form)">
<div class="vat-field">
<label>VAT number
<input type="text" ng-model="formModel.vat" name="vat" valid-vat="true">
</label>
<div ng-show="registerForm.$submitted || registerForm.vat.$touched">
<span ng-show="registerForm.vat.$error.vat">
<small class="error">Your VAT address is not valid, please correct.</small>
</span>
</div>
</div>
<div class="country-field">
<label>Country
<select ng-model="formModel.country" name="country">
<option value="{{country.iso_3}}" ng-repeat="country in countries()">{{country.name}}</option>
</select>
</label>
</div>
<button type="submit">Check</button>
</form>
However, I want to make this asyncValidator check conditional on the value of another field (country, more specifically whether the country is a EU country).
The country field is a combobox, populoated via a service which has a record of all countries and their vat information and eu status.
However, I do not know how to inject the value of the selected country into the factory function. One idea was to link the selected country to it's own service and use it from the factory, but then the validation doesn't run again when another country is selected. If a non-EU country is selected, I don't really care what is in the field.

Answer 1

Pasing value into derective is easy, you can pass it to same attribute or some other. Its better not to use isolated scope, because attribute directive should be able to work on every element. So You can pass your country information to the validation directive, and then pass it to function which is returned by factory.
The other thing is dependency. Validation is only run when model itself is changed. So you have to place watch / observation on it.
Stop talking ... its code time ...
Here is fully working example based on your code :
http://jsbin.com/yuqibajehe/edit?html,js,output
.factory('isValidVat', function($q, $http, $timeout) {
return function(vat, country) {
var deferred = $q.defer();
console.log(vat, country);
$timeout(function() {
if (vat === country) {
deferred.resolve();
}
deferred.reject();
},1000);
return deferred.promise;
};
})
.directive('validVat', function(isValidVat) {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
attrs.$observe('validVat', function() {
ngModel.$validate();
});
ngModel.$asyncValidators.vat = function(vat) {
return isValidVat(vat, attrs.validVat);
};
}
};
});
Ass you can see I have little bit simplified the async validator, but enough for now. function has two arguments, so I call it from other function.
Directive is used like that:
<input type="text" ng-model="vm.vat" name="vat" valid-vat="{{formModel.country}}" />
So we pass the value of model straight to the attribute valid-vat.
In directive we can then send the value into validator.
Then we have to observe the content of validator and run validation if this is changed using $validate().
For this case it is probably enough, but if you want to pass model directly like: valid-vat="formModel.country" it wouldn't work, because value of attribute doesn't change. So you would have go to the scope, or better evaluate attr value and watch its changes - like in this example: http://plnkr.co/edit/296x2shAVSe7FRv3mJnp?p=preview