Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save grapho/a9d4c12c9cc69e21029f6bb223d7b38d to your computer and use it in GitHub Desktop.
Save grapho/a9d4c12c9cc69e21029f6bb223d7b38d to your computer and use it in GitHub Desktop.
Forms
import Ember from 'ember';
export default Ember.Component.extend({
isFormValid: false,
childInputs: [],
actions: {
logChildViews: function() {
//do stuff
},
registerChild(component) {
console.log('registerComponent was called')
console.dir(component);
}
}
});
import Ember from 'ember';
export default Ember.Component.extend({
didInsertElement() {
this._super(...arguments);
this.get('register')(this);
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
{{#validated-form id="myForm" class="form-horizontal" as |form| }}
{{form.input label="Product Name" required=true id=inputName value=inputName placeholder="Product Name" type="text" input-class="form-control"}}
{{form.input label="Price" currencyField=true type="text" id="inputPrice" placeholder="Price" value=inputPrice}}
{{form.input label="Bar Code" required=true type="text" id="inputBarcode" placeholder="Bar Code" value=inputBarcode}}
{{#each model.tags as |tag|}}
{{form.input label=tag.name type="text" required=true containsOnlyNumbers=true id=(concat 'inputTag' tag.id) placeholder=tag.name}}
{{/each}}
<!-- Product Image -->
{{/validated-form}}
<form id={{id}} class={{class}}>
{{yield (hash input=(component "validated-input" register=(action 'registerChild')))}}
</form>
<button type="button" style="float: left;" class="btn btn-primary" {{action 'logChildViews'}}>Log Child Views!</button><br><br><br>
<div class="form-group" style="width: 80%; margin: 10px auto;">
<label>{{label}}</label>
{{input type=type value=value action="registerComponent"}}
{{#if hasError}}
{{#each errorMessages as |error|}}
<span class="help-block">{{error}}</span>
{{/each}}
{{/if}}
</div>
{
"version": "0.10.5",
"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.8.0",
"ember-data": "2.8.0",
"ember-template-compiler": "2.8.0",
"ember-testing": "2.8.0"
},
"addons": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment