Dynamic form

components.bs-form.element.control.masked-phone.js

import Ember from 'ember';

export default Ember.Component.extend({

});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  // Static
  staticModel: {
    name: "",
    email: "",
    phoneNumber: ""
  },
  // Dynamic
  modelInfos: [
    {attrName: 'name', controlType: 'text'},
    {attrName: 'email', controlType: 'email'},
    {attrName: 'phoneNumber', controlType: 'masked-phone'},
  ],
  dynamicModel: {},
  init() {
  	this._super(...arguments)
    // Initialize dynamic model
    let modelInfos = this.get('modelInfos');
    this.set('dynamicModel', modelInfos.reduce(function(prev, item){
      prev[item.attrName] = "";
    	return prev;
    }, {}));
       
  },

});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}
div[id*="-field"] {
	background-color: red;
	padding: 5px;
}

templates.application.hbs

<h3>Static form</h3>
{{#bs-form
formLayout="vertical"
model=staticModel as |form|}}
	{{form.element controlType="text" property="name" }}
  {{form.element controlType="email" property="email" }}
  {{#form.element property="phoneNumber" as |el|}}
  	{{masked-input mask='11.11.11.11.11' classNames='form-control input' value=el.value}}
  {{/form.element}}
{{/bs-form}}
{{#bs-alert dismissible=false type="success"}}
  <strong>Static model:</strong>
  <ul>
    <li>Name: {{staticModel.name}}</li>
    <li>Email: {{staticModel.email}}</li>
    <li>Phone Number: {{staticModel.phoneNumber}}</li>
  </ul>
{{/bs-alert}}
<br>
<br>
<h3>Dynamic form</h3>
{{#bs-form
formLayout="vertical"
model=dynamicModel as |form|}}
	{{#each modelInfos as |info|}}
		{{form.element controlType=info.controlType property=info.attrName }}
	{{/each}}
{{/bs-form}}
{{#bs-alert dismissible=false type="success"}}
  <strong>Dynamic model:</strong>
  <ul>
    <li>Name: {{dynamicModel.name}}</li>
    <li>Email: {{dynamicModel.email}}</li>
    <li>Phone Number: {{dynamicModel.phoneNumber}}</li>
  </ul>
{{/bs-alert}}

templates.components.bs-form.element.control.masked-phone.hbs

{{masked-input mask='11.11.11.11.11' classNames='form-control input' value=value}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-bootstrap": "1.0.0-alpha.12",
    "ember-cli-maskedinput": "0.1.2"
  }
}