Last updated: 2024-04-08
Unterstanding the InputRowComponent
If your project has a frontend with Angular and contains at least one form, the InputRowComponent is also included. This simplifies the handling of form elements. How does this work and how can we extend this component?
Let's assume we want to create a CarAddComponent with a form. In the TypeScript part, we create a reactive form, just as recommended for the current Angular version (see here).
A simple reactive form with validation rules
All FormControl elements are grouped together in the FormGroup. We pass the start value - in both cases null in our example - and the validation rules as parameters. Our form could then look like this in the corresponding template.
Using the InputRowComponent in the template
Instead of creating the input elements directly in the template, we delegate this task to our InputRowComponent using its selector app-input-row. The FormGroup and the field name are the first parameters. The rowType is 'text' by default, but is overwritten with 'radio' in the first case. We therefore also specify the individual options as a map, where the entry value corresponds to the options label in each case. The attribute label, which already contains a key for the localization, is used for the label for the entire row.
The TypeScript part of our InputRowComponent does not contain much magic. The method isRequired() checks directly at the FormControl whether the required validator is stored. The getInputClasses() method returns the classes if there is a validation error or the FormControl is disabled. If a dynamic parameter is stored as options, the changes are automatically displayed in the template. If required, we can add further @Input parameters here - for example rowClass. Our component also ensures that empty strings are submitted as null.
Extension of our component by the optional rowClass attribute
In the template part, a row is initialized with the appropriate form element. Since Angular internally activates specific functions via selectors such as [type=select], we have to define all types cleanly and cannot use the rowType field dynamically in all cases.
Using the new rowClass field
In addition to using any new attributes, we can also adapt the HTML structure and CSS classes in the template. It should be checked regularly whether all attributes are really still needed - to ensure the long-term maintainability of the code.
