CODEWITHSUNDEEP
javascripthtmlvalidationangular
user3794166
user3794166

Reputation:

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.

Upvotes: 0

Views: 526

Answers (1)

kemsky
kemsky

Reputation: 15261

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(),
    ...
    ]);

Upvotes: 1

Related Questions