Ion-input web-component validity issues


#1

I’m dabbling with using Ionic Framework components without a framework. As they are web components, they should be able to work just fine with vanilla javascript. Unfortunately, I’m having a little trouble with them.

In this sample, when an input is edited, I’d like to use the onchange event to do some custom validation. I want to use the browser’s built-in Constraint Validation.

Unfortunately, this does not work with ion-input. Since the web component places the actual input in the shadow root, the only accessible input is a hidden field. Unfortunately, hidden fields do not participate in constraint validation.

So, as you type in the “Ionic First Name” input field, the JavaScript gets the change events. However, it can’t validate the fields.

In the “HTML Last Name” input field, as you type, constraint validation is happening and updating the validity info in the table beneath.

JSBIN Sample

First question: Am I doing this wrong? Is there a way to access the REAL input in the shadow root?
Second Question: I considered submitting a PR to change how ionic creates the input. Instead of making it a hidden input, just make it not visible and pass the maxlength and minlength properties down to it. Is this a good approach?

Here’s a related issue : Ion-checkbox as a web-component