Блог

Я пытался создать пользовательский элемент — форму с обязательным текстовым полем. Для этого я использовал класс TextField и шаблон из fast-foundation, кнопку fluent, и мой шаблон для пользовательского элемента выглядит следующим образом —

 <form onsubmit="event.preventDefault();console.log('Submitting the form');">
        <text-field
        required
        value=${(x) => x.first}
        @change=${(x, c) => {x.first = (<TextField>c.event.target).value;}}>
        ${(x) => x.firstLabel}</text-field>
    <action-button appearance="accent" type="submit">Submit</action-button>
</form>
 

Кнопка действия просто расширяет кнопку fluentButton. Теперь, когда я нажимаю на кнопку, чтобы проверить сообщение о проверке пустого ввода, я получаю ошибку в браузере — недопустимый элемент управления формой с именем=» не поддается фокусировке.

Похоже, браузер не может сосредоточиться на элементе ввода, чтобы отобразить сообщение о проверке рядом с полем. Должен ли я был сделать здесь что-нибудь дополнительное, чтобы это сработало?