Wrapper Component for Form Controls


#1

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)

Syntax:

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

templates/components/form-control-group.hbs

{{#if hasError }}
  {{error}}
{{/if}}
{{label}}
{{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 
  value=value
  content=content
  contentPath=contentPath
  disabled=disabled
  checked=checked
  ...
}}

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.

Question:

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.

Edit

To be clear: in this question: http://stackoverflow.com/questions/31021116/setproperties-does-not-pass-attrs-as-expected 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: http://stackoverflow.com/questions/31033007/wrapper-component-for-form-controls


#2

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?