Wrapper Component for Form Controls

I’m looking for a pattern to make a wrapper component for form controls.

Its role: wrap any kind of component, (handle error states, messages)


{{form-control-group type="my-input" label="Some fancy label:"}}


{{#if hasError }}
{{component type}}

It works nice, as long as I don’t need any attribute for my-input component. Usually it is not the case. Let’s say I need pass the value. I could do

{{component type value=value}}

But as not that flexible as I wanted to have it. I will gonna use it with different form controls, ex.: select, checkbox etc. They all need different attributes. I also could prepare for this different attributes:

{{component type 

In this way it can be used only with the component it is prepared for. If it is published as part of a form addon, and its consumer want to use with a datapicker component, it won’t pass down the attributes.


Is there a way to stream down ALL the attributes passed to form-control-group component?

Maybe the whole concept is wrong, and there is a better pattern to handle this. Any critics and / or ideas are most welcome.


To be clear: in this question: ember.js - "setProperties" does not pass "attrs" as expected - Stack Overflow I tried to solve this very problem, passing down the attrs hash, which contains all the attributes. Maybe Ember is not ready for this, but I’m sure there is a workaround.

This is a copy of the following SO question: ember.js - Wrapper Component for Form Controls - Stack Overflow

Did you get anywhere with this? This is exactly what we are trying to do within our code. We tried registering a new keyword for “component-proxy” that takes the scope.attrs and passes them into the hash that renders the actual component. It kinda works, but getting some funky behaviour when the a value is changed and then changed backed to its orginal value.

Was curious to see if you or anyone else out there has successfully streamed all the attributes into a wrapped component?