Angular async Validierung mit mehreren Formularfelder

Question

ich eine Asynchron-Validierung Richtlinie haben, die funktioniert gut, wenn, aber es hängt von zwei Felder zu definieren, wenn eine Person existiert (numid und Typ), hier ist der Code:

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; 
     } 
    } 
} 
}); 

Aber ich weiß nicht, wie man die gleiche Validierung durchführt, wenn sich das andere abhängige Feld geändert hat.

Ich habe etwas über Require^Form in der Direktive gelesen, aber irgendwie verloren.

Ich habe versucht, diesen Codeblock

  scope.$watch('tipo', function(){ 
      ctrl.$validate(); 
     }); 

hinzufügen, aber dann bekomme ich eine unendliche Schleife $ verdauen.

Vielen Dank im Voraus.

Answer 1

Es stellte sich heraus, dass ich Uhr an der falschen Stelle innerhalb der Strg verwendet. $ AsyncValidators.numId, muss es draußen sein. Jetzt funktioniert es wie erwartet.

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(); 
     });    
    } 
} 
}); 

Und die 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> 

Answer 2

Sie können etwas tun:

$scope.$watch('tipo', function(newValue, oldValue, scope) { 
     if (newValue != oldValue) { 
     ctrl.$validate(); 
     } 
}); 

Auf diese Weise wird $ scope.watch jedes Mal wenn Sie einen neuen Wert auf $ scope.tipo haben genannt werden.