3

Tenho uma página de cadastro de usuários onde tenho um campo código onde gostaria de valida-lo de acordo com uma condição ($scope.erro) vinda do meu controller, já tenho alguns alertas porém eles validam só o form

Controller:

 if(status === 406){
        $scope.erro = true;
        console.log("Erro");
  }

Esse é o trecho do botão, seguido do template que exibe os erros:

<label class="item item-input" style="margin-left:10px;margin-right:10px;margin-top:8px"
   ng-class="{'has-errors' : usuarioForm.codigo.$invalid, 'no-errors' : usuarioForm.codigo.$valid}">
<input type="text" name="codigo" placeholder="Código" ng-model="usuario.codigo" ng-minlength="3" ng-maxlength="20"
   ng-blur="getUsuario(usuario, $event)" required>
</label>

<div class="error-container" ng-show="usuarioForm.codigo.$error" ng-messages="usuarioForm.codigo.$error">
   <div ng-messages-include="error-list.html"></div>
</div>

Template:

<script id="error-list.html" type="text/ng-template">
   <div class="error" ng-message="required">
   <i class="ion-information-circled"></i>
   ESSE CAMPO É OBRIGATÓRIO
   </div>

   <div class="error" ng-message="erro">
   <i class="ion-information-circled"></i>
   TESTE
   </div>

   <div class="error" ng-message="minlength">
   <i class="ion-information-circled"></i>
   Minimum length of this field is 5 characters!
   </div>
   <div class="error" ng-message="maxlength">
   <i class="ion-information-circled"></i>
   Maximum length of this field is 20 characters!
   </div>
</script>

Resumindo, quero exibir uma mensagem quando a variável $scope.erro for true.

Exemplo da página:

inserir a descrição da imagem aqui

2
  • vc conseguiu resolver esse problema ? como fez ? Commented 4/01/2016 às 9:02
  • @FernandoPaiva consegui sim, já vou postar a solução Commented 4/01/2016 às 10:12

1 Resposta 1

3

Resolvi o problema da seguinte maneira:

No controller:

$scope.showAlert = function(titulo, erroMsg) {
    var alertPopup = $ionicPopup.alert({
      title: titulo,
      template: erroMsg
    });
    alertPopup.then(function(res) {
      console.log('Err');
    });
  };

Então é só chamar a função showAlert e passar o titulo e a mensagem do erro, ex:

var erroMsg = "Código Inválido!";
var titulo = "Erro ao entrar com o código";
$scope.showAlert(titulo, erroMsg);

Esse exemplo de cima mostra um pop up com o erro, porém para colocar o erro embaixo do input fiz dessa forma:

<form name="usuarioForm" role="form" novalidate="">

<label class="item item-input" style="margin-left:10px;margin-right:10px;margin-top:8px"
ng-class="{'has-errors' : erro, 'no-errors' : !erro}">

<input type="text" name="codigo" placeholder="Código" ng-model="usuario.codigo" ng-minlength="3" ng-maxlength="20"
ng-blur="getUsuario(usuario, $event)" required>
</label>
<div class="error-container" ng-show="erro">
<div class="error">
<i class="ion-information-circled"></i>
CÓDIGO INVÁLIDO
</div>
</div>

<label class="item item-input" style="margin-left:10px;margin-right:10px;margin-top:5px">
<input type="text" placeholder="Nome" ng-model="usuario.nome" ng-required="true">
</label>

<label class="item item-input" style="margin-left:10px;margin-right:10px;margin-top:5px">
<input type="text" placeholder="Login" ng-model="usuario.login" ng-required="true">
</label>

Estou mostrando a mensagem de código inválido caso aconteça algum erro no Controller, dessa forma é só passar $scope.erro como true.

Ex:

error(function(response, status) {
    if (status === 406) {
        $scope.erro = true;
        var erroMsg = "Código não encontrado! Tenve novamente";
        var titulo = "Erro ao verificar código";
        $scope.showAlert(titulo, erroMsg);
        console.log("Erro");
    }
});
2
  • muito legal esse esquema. Obrigado. Eu estou tentando esse aqui: gajotres.net/… Commented 4/01/2016 às 10:36
  • 1
    Opa, boa sorte caso não consiga é só me chamar pra um chat que tento lhe ajudar. Commented 4/01/2016 às 10:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .