Material.io web: переключить состояние ошибки TextField

Question

Я использую material.io Компоненты текстового поля для простой веб-формы:

HTML (только для поля электронной почты, чтобы оно было коротким)

<div class="inline-text-field-container">
  <div class="tf-email mdc-text-field mdc-text-field--outlined">
    <input class="mdc-text-field__input" id="email" />
    <div class="mdc-notched-outline">
      <div class="mdc-notched-outline__leading"></div>
      <div class="mdc-notched-outline__notch">
        <label for="email" class="mdc-floating-label">Email</label>
      </div>
      <div class="mdc-notched-outline__trailing"></div>
    </div>
  </div>
  <div class="mdc-text-field-helper-line">
    <div
      class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
      role="alert"
      aria-hidden="true"
    >
      Please enter your email
    </div>
  </div>
</div>

JavaScript

import { MDCTextField } from '@material/textfield';
import { MDCRipple } from '@material/ripple';
import { MDCTextFieldHelperText } from '@material/textfield/helper-text';

const tfEmail = new MDCTextField(document.querySelector('.tf-email'));
const tfPassword = new MDCTextField(document.querySelector('.tf-password'));
const btnSubmit = new MDCRipple(document.querySelector('.mdc-button'));

document.querySelector('.btn-submit').addEventListener('click', onSubmitHandler);

function onSubmitHandler(e) {
    // Validations happen here
    // How do I change the email field's state to a validation error and show the validation text?
}

Я могу Не найдено ни одного рабочего примера того, как добавить состояния проверки ошибок в компонент TextField (красный контур) и отобразить текст справки «Неверный адрес электронной почты» (согласно скриншоту).

Можете ли вы сделать sh я в правильном направлении?

Answer 1

Я изучал то же самое. Разведав Google, я использовал TextFormField, где у меня был доступ к validate методу