Должен ли обязательный атрибут работать для пользовательских шаблонов ввода внутри формы? - PullRequest
0 голосов
/ 06 апреля 2020

В настоящее время я пытаюсь создать пользовательский ввод, который работает просто отлично, но по какой-то причине атрибут required (проверка формы) не работает.

  return ( // simplified code, <my-input>
      <div>
        <label htmlFor="myinput">myinput: </label>
        <input required name="myinput" id="myinput" type="text"/>
      </div>
    );

Когда я вложив мой пользовательский ввод в тег формы, форма не препятствует отправке значений, даже если я установил атрибут required . Если я просто скопирую / вставлю код html / jsx из моего компонента в тег формы, обязательный будет работать, как задумано.

<form>
  // required not working
  <my-input></my-input> 

  <div>
    <label for="myinput">myinput: </label>
    <input required name="myinput" id="myinput" type="text"/> // required working
  </div>

  <input type="submit">
</form>

Вопрос : есть ли конкретная c причина, по которой обязательный атрибут не работает внутри настраиваемого ввода (компонент-трафарет) внутри тега формы? А может, это должно сработать, и я как-то допустил ошибку.

1 Ответ

0 голосов
/ 06 апреля 2020

Это не работает, потому что Shadow DOM веб-компонента разрывает связь между вводом и формой, частью которой он является.

Однако разрабатывается API для пользовательских элементов, связанных с формой (см. Spe c), чтобы веб-компоненты могли вести себя больше как собственные элементы ввода в формах.

...