Como validar o ID de email em angularJs usando ng-pattern

Estou tentando validar um campo de ID de e-mail em angularJs usando a diretiva ng-padrão.

Mas sou novo no AngularJs. Eu preciso mostrar uma mensagem de erro assim que o usuário inserir o ID de email errado.

O código que eu tenho abaixo está tentando resolver. Ajude-me a usar o padrão ng para obter o resultado adequado.

  function Ctrl($scope) { $scope.text = 'enter email'; $scope.word = /^[az]+[a-z0-9._]+@[az]+\.[az.]{2,5}$/; }       invalid email!     

Se você quiser validar o e-mail, use a input com type = “email” em vez de type = “text”. O AngularJS tem uma validação de e-mail pronta para uso, portanto, não é necessário usar o padrão ng para isso.

Aqui está o exemplo da documentação original:

  
Email:
Required! Not valid email!
text = {{text}}
myForm.input.$valid = {{myForm.input.$valid}}
myForm.input.$error = {{myForm.input.$error}}
myForm.$valid = {{myForm.$valid}}
myForm.$error.required = {{!!myForm.$error.required}}
myForm.$error.email = {{!!myForm.$error.email}}

Para mais detalhes, leia este documento: https://docs.angularjs.org/api/ng/input/input%5Bemail%5D

Exemplo em direto : http://plnkr.co/edit/T2X02OhKSLBHskdS2uIM?p=info

UPD:

Se você não estiver satisfeito com o validador de e-mail embutido e quiser usar sua validação de padrão RegExp personalizada, a diretiva ng-pattern pode ser aplicada e, de acordo com a documentação, a mensagem de erro pode ser exibida assim:

O validador define a chave de erro padrão se o ngModel. $ ViewValue não corresponder a um RegExp

  
Email:

Required!
Not valid email!

text = {{text}}
myForm.input.$valid = {{myForm.input.$valid}}
myForm.input.$error = {{myForm.input.$error}}
myForm.$valid = {{myForm.$valid}}
myForm.$error.required = {{!!myForm.$error.required}}
myForm.$error.pattern = {{!!myForm.$error.pattern}}

Plunker: https://plnkr.co/edit/e4imaxX6rTF6jfWbp7mQ?p=preview

Há um bom exemplo de como lidar com esse tipo de problema modulando os validadores embutidos angulardocs . Eu adicionei apenas um padrão de validação mais restrito.

 app.directive('validateEmail', function() { var EMAIL_REGEXP = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[az]{2,4})$/; return { require: 'ngModel', restrict: '', link: function(scope, elm, attrs, ctrl) { // only apply the validator if ngModel is present and Angular has added the email validator if (ctrl && ctrl.$validators.email) { // this will overwrite the default Angular email validator ctrl.$validators.email = function(modelValue) { return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue); }; } } }; }); 

E simplesmente adicione

  

De acordo com a resposta de @scx, criei uma validação para GUI

 app.directive('validateEmail', function() { var EMAIL_REGEXP = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[az]{2,4})$/; return { link: function(scope, elm) { elm.on("keyup",function(){ var isMatchRegex = EMAIL_REGEXP.test(elm.val()); if( isMatchRegex&& elm.hasClass('warning') || elm.val() == ''){ elm.removeClass('warning'); }else if(isMatchRegex == false && !elm.hasClass('warning')){ elm.addClass('warning'); } }); } } }); 

E simplesmente adicione:

css

 .warning{ border:1px solid red; } 

html

  

Esta é a Validação de Email do jQuery usando Expressão Regex. Você também pode usar o mesmo conceito para o AngularJS se tiver idéia do AngularJS.

 var expression = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/; 

Fonte

Você pode usar ng-messages

  

inclua o módulo

  angular.module("blank",['ngMessages'] 

em html

  
This field is required
Your email address is invalid

Abaixo está o padrão completo para validação de email.

  
Please enter valid email address

Agora, o Angular 4 tem um validador de e-mail embutido https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6 https://github.com/angular/angular/pull/13709

Basta adicionar um email à tag. Por exemplo

  

Form State: {{f.valid?'VALID':'INVALID'}}

forma de controlador angularjs, apenas um exemplo para procurar um ou mais e-mails no corpo de uma mensagem.

 sp = $scope.messagebody; // email message body if (sp != null && sp.match(/([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([az]{2,6}(?:\.[az]{2})?)\S+/)) { console.log('Error. You are not allowed to have an email in the message body'); } 

Eu tentei o método @ Joanna e testei nos sites a seguir e não funcionou.

  1. https://regex101.com/
  2. https://www.regextester.com/
  3. https://regexr.com/

Eu então modifiquei e funcionou.

 /([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([az]{2,6}(?:\.[az]{2})?)\S+