42701

AngularJS: ngMessage weird behavior with input with type “email”

Question:

I follow <a href="http://toddmotto.com/moving-from-ng-model-parsers-to-ng-model-validates-ng-messages/" rel="nofollow" title="Moving from ngModel.$parsers /ng-if to ngModel.$validators /ngMessages">Moving from ngModel.$parsers /ng-if to ngModel.$validators /ngMessages</a> article from <a href="http://toddmotto.com/" rel="nofollow" title="Todd Motto's blog">Todd Motto's blog</a> and I want to migrate from ng-if to ng-messages. But ng-messages directive behaves very weird when I try to display to user two different messages for <input type="email">: first, when user leave field empty (then required error occurs) and second, when format is wrong (then email error occurs) - it displays both required and mail messages, but my old code displays only one message - about required error - and that is I think welcomed behavior. Here is simplified code:

<form name="ngMessageMailForm"> <input type="email" required="" name="email" ng-model="ctrl.ngMessageMail" /> <div ng-messages="ngMessageMailForm.email.$error" ng-if="ngMessageMailForm.email.$touched"> <span ng-message="email"> E-mail has not proper format<br /> </span> <span ng-message="required"> E-mail is required<br /> </span> </div> </form>

Comparison between old and new code you can find in this Plunker: <a href="http://plnkr.co/edit/Nr5Z6l4J3tPuefd5NigW?p=preview" rel="nofollow" title="Ng-if vs ng-messages at plnkr.co">Ng-if vs ng-messages at plnkr.co</a>, to reproduce weird behavior of ng-message click inside and then outside of mail inputs. You will see one message in case of ng-if form, and two messages in case of ng-message form. Did I miss something while migrating from ng-if to ng-messages? Thank you in advance for any help.

Answer1:

Everything is fine but you miss to add <a href="https://docs.angularjs.org/api/ngMessages/directive/ngMessages" rel="nofollow">angular-messages</a> library to your project...

Add its files to your project and inject ngMessages to your angularjs module then you are good to go...

<a href="http://plnkr.co/edit/LhkMHRGiTBxVdeYLnkbs?p=preview" rel="nofollow">here is update plunker</a>

Recommend

  • Grails eager fetch doesn't retrieve all data
  • C# Remove URL from String
  • Entity Framework ObjectContext: Concurrency
  • Want to understand iframe breakout code
  • Does Mobilefirst provide a provision to access web services directly?
  • How do I access an unhandled exception in an MVC Error view?
  • Jackson Parser: ignore deserializing for type mismatch
  • Email verification using google app script and google forms
  • How to use remove-erase idiom for removing empty vectors in a vector?
  • Repeat a vertical line on every page in Report Builder / SSRS
  • Email format validation in mvc3 view
  • Why is an OPTIONS request sent to the server?
  • Java Scanner input dilemma. Automatically inputs without allowing user to type
  • Retrieving value from sql ExecuteScalar()
  • java.lang.NoClassDefFoundError: com.parse.Parse$Configuration$Builder on below Lollipop versions
  • sending/ receiving email in Java
  • what is the difference between the asp.net mvc application and asp.net web application
  • How to format a variable of double type
  • VB.net deserialize, JSON Conversion from type 'Dictionary(Of String,Object)' to type '
  • Matrix multiplication with MKL
  • KeystoneJS: Relationships in Admin UI not updating
  • Codeigniter doesn't let me update entry, because some fields must be unique
  • Benchmarking RAM performance - UWP and C#
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • Acquiring multiple attributes from .xml file in c#
  • Hits per day in Google Big Query
  • How do I configure my settings file to work with unit tests?
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • How can I remove ASP.NET Designer.cs files?
  • Checking variable from a different class in C#
  • Does armcc optimizes non-volatile variables with -O0?
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal