Typeahead ngForm validation proposal

[fernando-sendMail]

Hi Everyone:

I've been using some of the components in the library, and I've noticed that the typeahead validates right after the user starts typing to look up for an element. I'm unaware of the thought process of why this has been done like this.

I tried to find any issue open addressing this behavior and I couldn't find any. I would like to make a proposal or start a discussion on how the typeahead should validate or run it's validators.

Currently, when a user starts typing in the <input> field, the directive will start looking up for any match for whatever the user is typing, also at the same time, validators are fired at that point, this validators affect, if present, the state of any ngForm reference. Assume we have this:

<form name="user">
  ...
  <input type="text" name="name" typeahead="..." typeahead-editable="false">
  ...
  <div ng-show="!user.name.$valid">
    Invalid name for user!
  </div>
</form>

As soon as the user starts typing a value the message will start showing even though that doesn't mean the user has not selected an incorrect value yet. In my opinion validation for this should happen after the user has selected a value by any means (clicking, hitting enter, etc) or if the <input> element looses the focus, this would create a more meaningful user experience when using this component, rather than setting the value of $valid to false right away.

Right now I created a directive to detect when the blur event is fired from the typeahead element so the error message actually shows when the user has lost focus on that element, implying that either the user left the element blank because he thought it was not a required field or because he typed a valid value.

I hope we can get to improve the existing code base and usability of this element, if you have any comments please let me know.

Thanks!

[rvanbaalen]

If you're using AngularJS 1.3, I think you can work around this behavior by setting your ng-model-options

<input type="text" ng-model="model.name" ng-model-options="{'updateOn': 'blur'}">

If you can setup a plunkr demonstrating your issue, I'll test if this fixes it.

[fernando-sendMail]

Thanks for the info @rvanbaalen I was aware of that new feature and I tried it before, the problem is that if you are using typeahead with promises ($http) it doesn't show the results until you blur that element.

Here's a plunkr with that issue:

http://plnkr.co/edit/TEIy8qofsVO87q40IZSj?p=preview

As you can see in the first typeahead the results wont popup until the typeahead input looses focus. On the second one the typeahead shows the results but it's marked as invalid when the user starts typing.

[rvanbaalen]

There are no typeaheads in your plunker @fernando-sendMail. Perhaps you forgot to save.

Also, when checking for validation, always check for both dirty (or !pristine) and error. In the plunker you showed you only set the .ng-invalid style.

[fernando-sendMail]

Sorry about that @rvanbaalen, now it's working and yes, I also checked for that in this version.

http://plnkr.co/edit/TEIy8qofsVO87q40IZSj?p=preview