Improvement - Expose the input/textarea tag in the text field component
Closed this issue · 5 comments
Current situation
In Angular (2+) we are using reactive forms and model bindings, thus we need to interact with the input/text area itself. Get/set the value and so on. In order to do that we need the input element itself. Right now it is hidden inside the text field component, which is also shadow rooted. You can of course add ControlValueAccessor to it, but it will still demand from us to build an extra directive in order to use reactive forms. We could of course do that, but it seems a bit overhead to do these extra complications for a simple input field.
Describe the improvement
You could still keep the component, but add the input field as a slotted element that we could have control of. Or, even better, expose the complete html so we easily can model bind things like validation messages and such.
We have added some more documentation regarding reactive forms
- It is not necessarily that you need add directive to handle the reactive forms for specific element, but you can use
ngDefaultControlon the specific sdds-textfield. We have added a demo on reactive form under the demos.
One thing is the change attribute, because of the shadow dom, change can't be triggered with the regular (change), but we have added a (customChange) attribute that you can use to handle the change event
https://digitaldesign.scania.com/components/textfields/code#angular-forms
Ok.. So I need to create a wrapper around the sdds component?
How about select? Is it the drop down component that is meant to be used? In that case we need similar functionality on that one.
Yeah, we focused on the textfield for this solution, but will look into similar solution for the dropdown also, it might require some tweaking on the dropdown
This issue has been resolved in the latest version of the @scania/tegel package by setting the shadowDOM to false in the textfield component.