Hani Hani - 4 months ago 57
Javascript Question

angular2, why is this html5 validation not working in and out of ngForm

I've created a plunkr to demonstrate the issue. Basically there are three

<input type="text">
elements with html5
pattern
attribute set to
^\d{2}[/]\d{2}[/]\d{4}$
on all of them. Difference between these three textboxes is that one is directly inside a
<form>
, another is inside a child component and that's inside the
<form>
tag. The last textbox is entirely outside of
<form>
and i'm expecting all three of them to behave the same on pattern validation as they all have Angular2 classes (
ng-touched
,
ng-invalid
, etc...) set, which tells me they're Angular2 controls. However, issue is that they are never set to
ng-valid
and always remain
ng-invalid
even when input value is
99/99/9999
which according to following regex websites is a valid match:


  1. regexpal.com

  2. regexr.com



Interestingly,
ng-untouched
and
ng-pristine
do update to proper classes when textboxes receive or lose focus. So what am I missing here? Why is input pattern change doesn't update the css class to be
ng-valid
? Here's the plunkr I mentioned: https://plnkr.co/edit/kW861I8OdnO9iR0328KP?p=preview

Update

If any of these textboxes are placed outside the
<my-app>
aka root element, they work just fine and browser validation seems to recognize the pattern to be valid. I've updated the plunkr with
txt 4
.

Answer

Plunker uses old forms module (tried few workarounds - did not help), i've checked with new module - it works. Check official doc and add the following:

    bootstrap(Application, [
    ...
    disableDeprecatedForms(),
    provideForms(),
    ...
    ]);