2016-11-25 56 views
2

我有一个异步验证指令,它工作正常时,但它取决于两个字段定义是否存在人(numId和类型),下面的代码:角异步验证与多个表单域

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

但是我不知道如何在其他依赖字段发生变化时进行相同的验证。

我读过一些关于在指令中需要^形式的东西,但有点不知所措。

我试图添加的代码

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

这块但后来我得到一个无限$消化循环。

在此先感谢。

+0

我发现,验证的射击形式的负载,而不是当值发生变化。你有没有想过如何在你改变价值时解雇他们?看到我的问题https://stackoverflow.com/questions/46101820/do-asyncvalidators-fire-all-the-time – Naomi

回答

0

原来我在ctrl里面的错误位置使用watch。$ asyncValidators.numId,它必须在外面。现在它按预期工作。

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> 
0

你可以做这样的事情:

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

这样,$ scope.watch将被调用每次你有你的$ scope.tipo一个新值。

+0

感谢卡洛斯,我正在使用手表在错误的地方寿。我发布了答案。干杯。 – raav6