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.
In the “HTML Last Name” input field, as you type, constraint validation is happening and updating the validity info in the table beneath.
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