Cómo validar la identificación del correo electrónico en angularJs usando ng-pattern

Estoy tratando de validar un campo de id. De correo electrónico en angularJs usando la directiva ng-pattern.

Pero soy nuevo en AngularJs. Necesito mostrar un mensaje de error tan pronto como el usuario ingrese la identificación de correo electrónico incorrecta.

El código que tengo a continuación estoy tratando de resolver. Ayúdeme con el uso de ng-pattern para obtener el resultado correcto.

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

Si desea validar el correo electrónico, utilice input con type = “email” en lugar de type = “text”. AngularJS tiene validación de correo electrónico de fábrica, por lo que no es necesario utilizar ng-pattern para esto.

Aquí está el ejemplo de la documentación 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 obtener más detalles, lea este documento: https://docs.angularjs.org/api/ng/input/input%5Bemail%5D

Ejemplo en vivo: http://plnkr.co/edit/T2X02OhKSLBHskdS2uIM?p=info

UPD:

Si no está satisfecho con el validador de correo electrónico incorporado y desea usar su validación de patrón RegExp personalizada, entonces se puede aplicar la directiva ng-pattern y de acuerdo con la documentación, el mensaje de error se puede mostrar así:

El validador establece la clave de error de patrón si el ngModel. $ ViewValue no coincide con un 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

Hay un buen ejemplo de cómo lidiar con este tipo de problema modyfing validadores incorporados angulardocs . Solo he agregado un patrón de validación más estricto.

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

Y simplemente agrega

  

De acuerdo con la respuesta de @scx, creé una validación 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'); } }); } } }); 

Y simplemente agrega:

css

 .warning{ border:1px solid red; } 

html

  

Esta es la Validación de jQuery Email utilizando Regex Expression. también puedes usar el mismo concepto para AngularJS si tienes idea de AngularJS.

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

Fuente

Puedes usar ng-messages

  

incluir el módulo

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

en html

  
This field is required
Your email address is invalid

A continuación se muestra el patrón totalmente calificado para la validación de correo electrónico.

  
Please enter valid email address

Ahora, Angular 4 tiene un validador de correo electrónico incorporado https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6 https://github.com/angular/angular/pull/13709

Simplemente agregue un correo electrónico a la etiqueta. Por ejemplo

  

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

Controlador angularjs, solo un ejemplo para buscar uno o más correos electrónicos en el cuerpo de un mensaje.

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

Intenté el método de @Joanna y probé en los siguientes sitios web y no funcionó.

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

Luego lo modifiqué y funcionó.

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