How to get the text-field's input element to work with events?

[alexmeier-19]

I'm quite new to material-web, but I find it already easier to use than material-components-web. I need to implement some custom complex validation and I wonder how can I get the text-field's input element, for example, to add event listeners to it in a convenient way? In mdc there was something like someMdcTextInput.listen('keydown', ...). I can find a private method getInput(), but that's it...
Thank you in advance!

[asyncLiz]

The text field works similarly to the platform's <input> element. You can use element.addEventListener() to listen to input-related events, such as input or change. Many other events like click and keydown can also be listened to.

Text fields use constraint validation that you may want to familiarize yourself to check out. There's a lot of useful properties and methods like textField.validity and textField.setCustomValidity()

An example listener that checks a text field's value when it changes and reports the error when it's invalid:

mdTextField.addEventListener('change', () => {
  if (isUsernameAvailable(mwcTextField.value)) {
    mdTextField.setCustomValidity('');
  } else {
    mdTextField.setCustomValidity('Username is unavailable.');
  }

  mdTextField.reportValidity();
});

You can also use built-in validation attributes like the required, minlength, and pattern. Our text field docs have a section on validation, along with APIs for properties and methods that may be useful!

[alexmeier-19]

Thank you for the explanation! I have one more stupid question, which I also can't find an answer to... 😅 I realized I didn't even connect my mdTextField = new MyMd.MdOutlinedTextField(); with my html <md-outlined-text-field id="12345"...></..> element. I think in mdc the id or the html element was passed to the constructor, but for material-web I can't find in API how to do it. Sorry for so probably simple question... It's late over here...

[alexmeier-19]

Ok, I guess I found a way. If I get the <md-outlined-text-field id="12345"...></..> element by id in JS I'll get the MdOutlinedTextField Object with the whole API already, won't I?

[alexmeier-19]

But then I have a problem if I initialize my JS first before the html is even created... 🤔

[asyncLiz]

Ok, I guess I found a way. If I get the <md-outlined-text-field id="12345"...></..> element by id in JS I'll get the MdOutlinedTextField Object with the whole API already, won't I?

Yes! You do not need to create or attach anything. When the html element is rendered on the page, the custom element's javascript automatically attaches, whether it's loaded before or after the html is rendered.

<md-outlined-text-field id="12345"></md-outlined-text-field>

<script type="module">
  const textField = document.getElementById('12345');
  textField.addEventListener('change', () => {
    textField.setCustomValidity(getErrorMessageOrEmptyString(textField.value));
    textField.reportValidity();
  });
</script>

If you load @material/web before the html is rendered, you may need to wait for customElements.whenDefined('md-outlined-text-field') if the text field hasn't hydrated by the time you start using it.

[alexmeier-19]

Thank you for your answer! Much appreciated and keep up the great work!