Form-fields

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  
  field1: {
  	label: 'mon texte',
    value: 'Coucou!',
    isDirty: true
  },
  
  field2: {
  	label: 'mon number',
    value: 22,
    isDirty: false
  },
  
  field3: {
  	label: 'ma date',
    value: '2016-12-23',
    isDirty: false
  }
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<form>
	<p>1</p>
  {{form-field fieldType='text' field=field1}}

	<p>2</p>
  {{#form-field fieldType='text' field=field1 as |formField|}}
  	{{formField.content}}
    {{#formField.bellow}}
    	plus: un texte en plus
    {{/formField.bellow}}
  {{/form-field}}
  
	<p>3</p>
  {{#form-field fieldType='number' field=field2 as |formField|}}
  	{{#formField.content withSide=true as |content|}}
    	{{content.value}}
      {{#content.side}}
        mon side!
      {{/content.side}}
    {{/formField.content}}
    {{#formField.bellow}}
    	plus: un autre texte en plus
    {{/formField.bellow}}
  {{/form-field}}
  
	<p>4</p>
  {{#form-field fieldType='custom' field=field3 isDirty=true as |formField|}}
  	
    {{#formField.content as |content|}}
    	{{#content.value}}
    		{{input type="date" value=field3.value}}
      {{/content.value}}
    {{/formField.content}}
    
    {{#formField.bellow}}
    	plus: custom
    {{/formField.bellow}}
	
  {{/form-field}}
  
  <p>5</p>
  {{#form-field fieldType='custom' field=field3 isDirty=true withSide=true as |formField|}}
  	{{#formField.content withSide=true as |content|}}
    	{{#content.value}}
    		{{input type="date" value=field3.value}}
      {{/content.value}}
      {{#content.side}}
        mon side!
      {{/content.side}}
    {{/formField.content}}
   
   {{#formField.bellow}}
    	plus: custom avec side
    {{/formField.bellow}}
  {{/form-field}}
</form>

form-field-bellow.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['bellow']
});

form-field-bellow.template.hbs

bellow: {{yield}}

form-field-content.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNameBindings: [':form-field-content', 'withSide:with-side'],
  
  isCustomField: Ember.computed('fieldType', {
  	get() {
      return this.get('fieldType') === 'form-field-custom';
    }
  }),
  
  fieldTypeComponent: Ember.computed('fieldType', {
  	get() {
    	return 'form-field-' + this.get('fieldType');
    }
  }),
  
  withSide: false
  
});

form-field-content.template.hbs

<div class="inner {{if withSide 'with-side'}}">
  {{#unless hasBlock}}
    {{component fieldTypeComponent
                classNames='form-field-value'
                field=field 
                isDirty=isDirty}}
  {{/unless}}

  {{yield 
      (hash side=(component 'form-field-side'
                            field=field)
            value=(component fieldTypeComponent
                             field=field
                             classNames='form-field-value'
                             isDirty=isDirty)

      )
  }}
</div>
<ul>
<li>validation</li>
</ul>

form-field-custom.component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

form-field-custom.template.hbs

{{yield}}

form-field-label.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName:'label'
});

form-field-label.template.hbs

{{label}}

form-field-number.component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

form-field-number.template.hbs

{{input type="number" value=field.value }}

form-field-side.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['side']
});

form-field-side.template.hbs

side: {{yield}}

form-field-text.component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

form-field-text.template.hbs

{{input type="text" value=field.value }}

form-field.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNameBindings: [':form-field', 'isDirty:dirty:'],
  isDirty: Ember.computed.reads('field.isDirty'),
  label: Ember.computed.reads('field.label'),
  fieldType: 'form-field-text'
});

form-field.template.hbs

{{form-field-label field=field label=label}}
{{#if hasBlockParams}}
  {{yield 
    (hash content=(component 'form-field-content'
                             field=field
                             fieldType=fieldType
                             isDirty=isDirty)
      bellow=(component 'form-field-bellow'
                            field=field)
    )
  }}
{{else}}
  {{form-field-content fieldType=fieldType
                       field=field
                       isDirty=isDirty }}
  {{yield  (hash bellow=(component 'form-field-bellow'
                                   field=field)
            )
  }}
{{/if}}

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.form-field {
  position: relative;
	border: 1px solid #eee;
  padding: 4px;
  margin: 4px;
}

.form-field.dirty {
	background-color: lightBlue;
}

.form-field:after {
  display: block;
  clear: both;
  content: '';
}

label {
  font-weight: bold;
  float: left;
  width: 19%
}

.bellow {
	float: left;
	width: 100%;
}

.form-field-content {
	width: 80%;
  float: right;
}
.side {
	float: right;
	width: 19%;
}

.form-field-content input {
  width: 100%;
}

.form-field-content .inner.with-side > .form-field-value {
	float: left;
	width: 80%;
}

.form-field-content .inner.with-side:after {
  display: block;
  clear: both;
  content: '';
}

twiddle.json

{
  "version": "0.5.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.3.0",
    "ember-template-compiler": "2.3.0"
  }
}