Angular.js: Email input validation not working consistently

[fschlaef]

I'm submitting a ...

• [x] bug report
• [ ] feature request
• [ ] other

Current behavior:
Input type email validation does not work if the typing is delayed. The ng-invalid class is not set on neither the input nor the form, but if you try and submit the form an error message will (correctly) appear.

Expected / new behavior:
Input verification should occur in all cases

Minimal reproduction of the problem with instructions:
https://jsfiddle.net/vaLozprj/26/

We used $timeout to simulate a loading delay : in our app, we do not have it, however we have lots of components creating this delay. We use dynamic typing to speed up the development process (the repro is very simplified, int the real app we have custom components abstracting common form elements)

AngularJS version: 1.7.2 (reproduced with 1.7.3-build.26300 too)

Browser: Chrome 68 | Firefox 61 | Untested on others

Anything else:

[gkalpak]

This is expected behavior. It is not related to email validation. It is generally about the input type.
Basically, by setting the type asynchronously, the type is not available when the input element is compiled. The specific behavior attached to input elements depends on the type (at the time of compilation). So, having an empty type, AngularJS is not able to know this is an email type.

When later the type is updated to email, the element has already been compiled and it won't be compiled again.

#

What you need to do to ensure that it works as expected, is delay compilation until the type is available. The easiest way to do this, is to add an ngIf directive that checks for type:

<input type="{{ $ctrl.type }}" ng-if="$ctrl.type" ... />

Even better, if you know $ctrl.type will be undefined initially and will never change once set, you can use one-time bindings to save unnecessary watchers:

<input type="{{ ::$ctrl.type }}" ng-if="::$ctrl.type" ... />

[fschlaef]

Your suggestion worked perfectly. Thank you very much !