Skip to content

Instantly share code, notes, and snippets.

@fpalluel
Last active June 15, 2017 13:51
Show Gist options
  • Save fpalluel/aba2156730b18920ca1dc8790cafe769 to your computer and use it in GitHub Desktop.
Save fpalluel/aba2156730b18920ca1dc8790cafe769 to your computer and use it in GitHub Desktop.
2 forms - beta.1
import Ember from 'ember';
export default Ember.Component.extend({
modelOne: {},
modelTwo: {},
actions: {
submitOne(m) {
this.set('formOneSubmitted', true);
},
submitTwo(m) {
this.set('formTwoSubmitted', true);
}
}
});
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;
}, {}));
},
});
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
div[id*="-field"] {
background-color: red;
padding: 5px;
}
{{#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}}
{
"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-beta.1",
"ember-cli-maskedinput": "0.1.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment