Javascript Não vejo vantagem no "data binding" ANGULAR JS, está esquisito.

[Adriano_web]

Estou tentando criar uma aplicação que validará e-mail e senha de um usuário, exibindo uma mensagem de erro caso algo dê errado. A ideia seria realizar a depuração do campo de entrada com expressões regulares JavaScript, utilizando uma diretiva "ng-hide" para exibir ou ocultar a mensagem de erro caso true ou false.

 

Curiosidade: não faço ideia do porque o Angular não permite que se utilize o type="email" para o campo, queria saber o porque que com isso nenhuma ligação de dados ponta a ponta funciona. Ou seja, quando utilizo o type=email o Angular não transmite os valores do campo para a variável contida na ng-model, mais não é esse o ponto. A dúvida não é essa, mas é uma curiosidade. 

<input type="email" ng-model="campoValor">

{{ campoValor }}

O exemplo acima não funciona em tempo real.

 

Mais a dúvida proeminente é: 

Eu queria que o valor que estivesse no input pudesse ser apurado em tempo real, ou seja, se o usuário digitasse o e-mail sem conter um arroba "¨@", por exemplo, a mensagem contendo o erro seria exibida, pois o campo e a expressão regular não bateriam. Mas não está acontecendo isso mesmo utilizando o type="text". Segue o código:

 

HTML

<form>
  <input type="text" name="email" ng-model="valorCampoEmail" placeholder="[email protected]" autofocus>
  <span ng-hide="condicaoEmailValido">O seu e-mail não é válido!</span>
</form>

 

ANGULAR

var app = angular.module("formValidTest", []);
app.controller("formTestCtrl", function($scope) {
  $scope.valorCampoEmail = "";
  $scope.condicaoEmailValido = 
    /^\w+@{1}(aol|bol|outlook|yahoo|gmail|hotmail)(.com|.gov)$/.test(angular.copy($scope.valorCampoEmail));
})

 

Detalhe: Já tentei sem utilizar o "angular.copy", apenas usando o $scope.valorCampoEmail, mas não dá certo.

 

Deveria ser verdadeiro caso o e-mail digitado tivesse todas as características da expressão regular, assim, escondendo a mensagem de erro, caso contrário, a exibiria.

 

 

 

 

[Adriano_web]

Pessoal, resolvi o problema em questão inserindo um método ao meu aplicativo como segue: 

 

Ao digitar no campo de entrada, envia o valor a variável "valorCampoEmail" e essa será apurada num método "emailApurar" que retornará um booleano a diretiva ng-hide para exibir a mensagem de erro ou ocultá-la. 

<input 
       type="text" 
       name="email" 
       data-ng-model="valorCampoEmail"
       placeholder="[email protected]" 
       autofocus />

<span data-ng-hide="emailApurar()">O seu e-mail não é válido!</span>

<script>
  var app = angular.module("formValidTest", []);
  app.controller("formTestCtrl", function($scope) {
    $scope.valorCampoEmail = "";
    $scope.emailApurar = function() {
      return /^\w+@{1}(aol|bol|outlook|yahoo|gmail|hotmail)(.com|.gov)$/.test(
        angular.copy($scope.valorCampoEmail)
      )
    }
  })
</script>