Как вы бы организовали структуру компонентов?

У меня есть несколько секций HTML, который содержат элементы формы (select, input, texarea, checkbox).
Каждую секцию можно оформить как отдельный компонент.

Задача стоит собрать выбранные значения из каждой секции и собрать url для фильтра.
Предположим, что каждый компонент имеет данные на вход @Input, которые формируют форму, и выходные, выбранные значения @Output.

Так же можно предположить, что есть какой-то класс, который формирует url (string) для каждый выбранных значений из каждого компонента.

Исходя из этого, должен быть родительский компонент - прослушивающий, управляющий дочерними (секциями - компонентами).

Все это усложняется тем, что для каждой секции есть свои правила формирования url на основе формы.
Например, если в секции "Дата производства" есть поля с датами, но на выходе, если они заполнены, нужно сформировать строку url вида:

filter?dateStarrt[lt]=value&dateEnd[gte]=value.

Из другой секции могуть прилетать только значения выбранных чекбоксов, как массив. В таком случае фильтр дополняется значениями:

filter?dateStarrt[lt]=value&dateEnd[gte]=value&import=1,3,4[in]
.

Можете дтать пару идей, как построить архитектуру компонентов так, чтобы это было гибко.

Не хочется зашивать логику в каждый компонент.
_________________________________
Можно отталкиватсья от типа элемента формы, если это чекбок - то к выбранными значениями применить оператор [in], если это текстовое поля, то [eq], если дата - то на выбор 4 значения: >=, >, <, <=
На выходе из каждого компонента сейча получаю выбранные значения. Но ничего не знаю о типе элемента формы.

Видел, в некоторых фильтрах операцию зашиваю в качестве имени поля:

<input type="text" name="build_year__lte"  placeholder="до" tabindex="0" value="">


Можно ли как-то расширить formControl в reactive forms дополнительными данными?
  • Вопрос задан
  • 54 просмотра
Пригласить эксперта
Ответы на вопрос 1
alex_romanov116
@alex_romanov116
Web-developer
Для каждого компонента который требуется в фильтре например date, реализуйте интерфейс ControlValueAccessor, и по необходимости Validator для валидации.
Значение такого FormControl будет :
startDate: x,
endDate:y
.
Написать класс Converter который принимает FormGroup берет значение формы и преобразовывает в необходимый формат, по необходимости можно по аналогии десериализацию сделать из строки в объект значения формы.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы