form field simple

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 |field|}}
  	{{field.value}}
    {{#field.bellow}}
    	plus: un texte en plus
    {{/field.bellow}}
  {{/form-field}}
  
	<p>3</p>
  {{#form-field fieldType='number' field=field2 withSide=true as |field|}}
  	{{field.value step=30}}
    {{#field.side}}
      <button style="width: 100%;">side</button>
    {{/field.side}}
  {{/form-field}}
  
	<p>3bis</p>
  {{#form-field fieldType='number' field=field2 as |field|}}
  	{{field.value step=10}}
  {{/form-field}}
  
	<p>3terce</p>
  {{#form-field fieldType='number' field=field2 withSide=true as |field|}}
  	{{field.value}}
    {{#field.side}}
      <button style="width: 100%;">side</button>
    {{/field.side}}
    {{#field.bellow}}
    	plus: un autre texte en plus
    {{/field.bellow}}
  {{/form-field}}
  
	<p>3q</p>
  {{form-field fieldType='number' field=field2 }}
  
	<p>4</p>
  {{#form-field fieldType='custom' field=field3 isDirty=true as |field|}}
  	
    {{#field.value}}
    	{{input type="date" value=field3.value}}
    {{/field.value}}
    
    {{#field.bellow}}
    	plus: custom
    {{/field.bellow}}
	
  {{/form-field}}
  
  <p>5</p>
  {{#form-field fieldType='custom' field=field3 isDirty=true withSide=true as |field|}}
  	{{#field.value}}
    	{{input type="date" value=field3.value}}
    {{/field.value}}
    {{#field.side}}
      <button style="width: 100%;">side</button>
    {{/field.side}}
   {{#field.bellow}}
    	plus: custom avec side
    {{/field.bellow}}
  {{/form-field}}
</form>

	<p>6</p>
  {{#form-field fieldType='number' field=field3}}
  		{{input type="date" value=field3.value}}
    	plus: custom rapide
  {{/form-field}}

form-field-bellow.component.js

import Ember from 'ember';

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

form-field-bellow.template.hbs

{{yield}}

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({
  step: 1
});

form-field-number.template.hbs

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

form-field-side.component.js

import Ember from 'ember';

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

form-field-side.template.hbs

{{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',
  fieldTypeComponent: Ember.computed('fieldType', {
  	get() {
    	return 'form-field-' + this.get('fieldType');
    }
  }),
});

form-field.template.hbs

{{form-field-label field=field label=label}}
<div class="form-field-content">
	<div class="inner {{if withSide 'with-side'}}">
  {{#if hasBlock}}
    {{yield 
      (hash value=(component fieldTypeComponent
                             classNames='form-field-value'
                             field=field
                             isDirty=isDirty)
            side=(component 'form-field-side'
                            field=field)
            bellow=(component 'form-field-bellow'
                              field=field)
      )
    }}
  {{else}}
    {{component fieldTypeComponent
                field=field
                classNames='form-field-value'
                isDirty=isDirty }}
  {{/if}}
  </div>
  <ul>
  	<li>validation</li>
  </ul>
</div>

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: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"
  }
}