Угловая асинхронная проверка с несколькими полями формы
У меня есть асинхронная директива проверки, которая отлично работает, когда, но это зависит от двух полей, чтобы определить, существует ли человек (numId и type), вот код:
app.directive('personaUnica', function($http, $q){
return{
require:'ngModel',
scope: {
tipo: "=personaUnica"
},
link: function(scope, element, attrs, ctrl){
ctrl.$asyncValidators.personaUnica = function(modelValue, viewValue){
if (ctrl.$isEmpty(modelValue)) {
// valido si es vacio
return $q.when();
}
var defer = $q.defer();
$http.get('/someRESTEndpoint/', {
params:{ identificacion: modelValue, tipo: scope.tipo }
}).then(function(respuesta){
//Person found, not valid
if( respuesta.data.elementoExiste ){
defer.reject('Persona existe.');
}
}, function(respuesta){
//Person not found, resolve promise
if(!respuesta.data.elementoExiste){
defer.resolve();
}
});
return defer.promise;
}
}
}
});
Но я не знаю, как сделать такую же проверку, когда другое зависимое поле изменилось.
Я читал что-то о require ^form в директиве, но в некотором роде потерял.
Я пытался добавить этот блок кода
scope.$watch('tipo', function(){
ctrl.$validate();
});
Но тогда я получаю бесконечный цикл $ digest.
Спасибо. продвижение.
2 ответа:
Вы можете сделать что-то вроде этого:
$scope.$watch('tipo', function(newValue, oldValue, scope) { if (newValue != oldValue) { ctrl.$validate(); } });
Таким образом, $scope.часы будут вызываться каждый раз, когда у вас будет новое значение на вашем $scope.типо.
Оказалось, что я использовал watch в неправильном месте внутри ctrl.$asyncValidators.нумид, он должен быть снаружи. Теперь он работает, как и ожидалось.
app.directive('numId', function($http, $q){ return { restrict : 'A', scope: { tipo: "=numId" }, require: 'ngModel', link: function(scope, element, attrs, ctrl){ ctrl.$asyncValidators.numId = function(modelValue, viewValue){ if (ctrl.$isEmpty(modelValue) || ctrl.$isEmpty(scope.tipo)) { // consider empty model valid console.log('Not going yet..'); return $q.when(); } var defer = $q.defer(); $http.get("/some-server/endpoint",{ params:{ identificacion: modelValue, tipo: scope.tipo } }).then(function(res){ if( res.data.personaExiste){ console.log('exists, not valid') defer.reject('exists, not valid'); }else if( !res.data.personaExiste ){ console.log('NOT exists, valid!') defer.resolve(); } }, function(){ defer.reject('Error...'); }); return defer.promise; } // Search when tipo is changed scope.$watch('tipo', function(){ console.log('Tipo:' + scope.tipo) ctrl.$validate(); }); } } });
И html:
<div class="form-group"> <label>Numero identificacion</label> <input type="text" name="numId" required ng-model="busqueda.numId" num-id="busqueda.tipoUsuario"> <pre class="well"> {{ frmBuscar.numId.$error }} </pre> </div>