Input Field Text - optimize component usage in forms

[thrbnhrtmnn]

Description / User story

After doing a first exploration with #596 , we have some open tasks to make the Input Field Text component usable in real forms.

Requirements / Prerequisites

• Create unstyled form component to check basic validation for text input components #596

Acceptance Criteria

• Acceptance Criteria 1
• ...

Additional information

There are more tasks like this for other form components:

• ...

Code of Conduct

• I agree to follow this project's Code of Conduct

[angsherpa456]

Steps taken while exploring #596:

1. A form component named as BlrForm, created with one slot and submit button.
2. Two versions of example usage of form created. First version is named as BlrFormExampleWithSlot where the form created in #1 is used. In the second version named BlrFormExampleWithoutslot the form template is directly used.
3. In the above mentioned example form components namely BlrTextInput, BlrCheckbox and Blrradio button were used.
4. Mixins named 'testing' was created and used in the BlrTextInput component.The Mixin was required because the property change of slotted BlrTextInput (eg: hasError) did not trigger an update, as the property update was not registered the BlrTextInput did not show any error. Therefore an event was dispatched with the payload of hasError and errorMessage from the slotted form component (BlrTextInput) whenever it is invalid. The implementation can be seen in this experimental PR 'feat(ui-library): forms with&without slot and simple manual validation(#596) #977'

Observation:

1. BlrRadioGroup did not work out of box. Radio element not rendered only the hint and lable were rendered.
2. BlrNumberInput also had a reactivity issue with regards to the property change. In other words, it did not work out of box like other components.
3. BlrCheckbox gets the infinite loop rendering when the checked property is passed. '<blr-checkbox .checked ...>'

Wishful changes for the future:

1. The submit button can also be slotted rather than placing it inside the form component as in Steps #1. Hint: When the submit button is slotted then there might be an issue with connecting the handleSubmit event, however, a button with role="submit" might already solve the issue.
2. The form with slotted version will be handy for complex validation later on so it is preffered over the approach where the tag is directly used.