Реализация автоматического добавления данных пользовательского элемента формы в FormData
Я создал кастомный селект на основе веб-компонентов и у меня возникли затруднения с тем, как наиболее простым способом передать данные из него в объект FormData.
Во всех статьях по FormData, которые я изучил, в примерах всегда показывались кейсы работы только с одной формой, где в нее вручную добавляют данные с помощью FormData.set/append(), но мне хотелось бы найти более автоматизированное (а может и нативное) решение для всех форм на сайте.
Я пытался найти какие-либо свойства, которые указывали бы, что из этого элемента FormData может получить данные (что-то типа object.isFormField = true), или методы передачи этих самых данных из элемента в FormData, или события запроса данных, но ничего подходящего так и не смог найти.
Мне на ум пришло два варианта решения проблемы:
- Добавление скрытого инпута в Light DOM моего элемента и дублирование в инпут значений атрибутов name и value.
- Для всех форм страницы добавить прослушиватель на onformdata, в котором искать в форме мои элементы и вручную добавлять их данные теми же FormData.set/append().
Оба варианта имеют приличное количество недостатков, поэтому хотелось бы узнать, как другие разработчики справлялись с похожими проблемами. Если у кого-то есть более эффективные кейсы решения этой проблемы, буду рад их увидеть.
Исходники моего веб компонента: https://github.com/DanilovOV/WebComponents/blob/master/components/CustomSelect.js