2 forms - alpha.12

components.modal-test.js

import Ember from 'ember';
export default Ember.Component.extend({
  modelOne: {},
  modelTwo: {},
  actions: {
  	submitOne(m) {
      this.set('formOneSubmitted', true);
    },
    submitTwo(m) {
       this.set('formTwoSubmitted', true);
    }
  
  }
});

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

{{modal-test}}

templates.components.modal-test.hbs

{{#bs-modal as |modal|}}
  {{#modal.header closeButton=true }}
  	Two forms in modal
  {{/modal.header}}
  {{#modal.body}}
	  {{#bs-form formLayout="vertical" class="form-one" onSubmit=(action "submitOne") model=modelOne as |form|}}
  	{{#form.group class="form-group-xs" }}
     	<h5>Form 1{{#if formOneSubmitted}}
      	<span class='label label-success'>Submitted !
        </span>
       	{{/if}}
        </h5>
      	{{form.element controlType="text" property="valueOne" }}
    {{/form.group}}
    {{/bs-form}}
     {{#bs-form formLayout="vertical" class="form-two" onSubmit=(action "submitTwo") model=modelTwo as |form|}}
  	{{#form.group class="form-group-xs" }}
     	<h5>Form 2 {{#if formTwoSubmitted}}
      	<span class='label label-success'>Submitted !
        </span>
       	{{/if}}
       </h5>
      	{{form.element controlType="text" property="valueOne" }}
    {{/form.group}}
    {{/bs-form}}
    {{/modal.body}}
    {{#modal.footer as |footer|}}
         {{#bs-button onClick=(action modal.submit) type="primary" }}Submit all{{/bs-button}}
    {{/modal.footer}}
{{/bs-modal}}

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