How would you organize the component structure?

Question

Angular

I have several HTML sections which contain form elements (select, input, texarea, checkbox).
Each section can be designed as a separate component.

The task is to collect the selected values ​​from each section and collect the url for the filter.
Let's say that each component has an input @Input, which forms a form, and an output, selected values @Output​​.

It can also be assumed that there is some class that generates a url (string) for each selected value from each component.

Based on this, there must be a parent component - listening, managing child (sections - components).

All this is complicated by the fact that each section has its own rules for generating url based on the form.
For example, if there are fields with dates in the "Date of production" section, but at the output, if they are filled, you need to form a url string like:

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

From the other section, only the values ​​of the selected checkboxes can arrive, as an array. In this case, the filter is supplemented with the values:

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

.

Can you give me a couple of ideas on how to structure the component architecture in a way that is flexible.

I do not want to sew logic into each component.
_________________________________
You can start from the type of the form element, if it is a checkbox, then apply the [in] operator to the selected values, if it is a text field, then [eq], if it is a date, then there are 4 values ​​to choose from: >=, >, <, <=
At the output of each component, I now get the selected values. But I don't know anything about the form element type.

I saw that in some filters I sew up the operation as a field name:

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

Is it possible to somehow extend formControl in reactive forms with additional data?

Answer 1

For each component required in a filter such as date, implement the ControlValueAccessor interface, and optionally a Validator for validation.
The value of such a FormControl would be:

startDate: x,
endDate:y

.
Write a Converter class that takes a FormGroup, takes the form value and converts it to the required format, if necessary, by analogy, deserialization can be done from a string into a form value object.