Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save czosel/83f7ab4ddf8774019a6483783e3b9ac2 to your computer and use it in GitHub Desktop.
Save czosel/83f7ab4ddf8774019a6483783e3b9ac2 to your computer and use it in GitHub Desktop.
custom input layout
import Ember from 'ember';
import UserValidations from 'twiddle/validations/user';
export default Ember.Controller.extend({
UserValidations,
actions: {
submit(model) {
console.log('submit', model)
model.save()
}
}
});
import Ember from 'ember';
export default Ember.Route.extend({
model() {
console.log('route called')
return Ember.RSVP.hash({
user: {
height: '167',
weight: '56'
}
});
}
});
{{#validated-form
model=(changeset model.user UserValidations)
on-submit = (action "submit")
submit-label = 'Save' as |f|}}
{{#f.input name='height' label='height' as |fi|}}
<div class="input-group">
{{input value=fi.value change=(action fi.update value="target.value")}}
<span class="input-group-addon">kg</span>
</div>
{{/f.input}}
{{#f.input name='weight' label='weight' as |fi|}}
<div class="input-group">
{{one-way-input fi.value update=fi.update}}
<span class="input-group-addon">kg</span>
</div>
{{/f.input}}
{{f.submit label="Save" disabled=f.model.isInvalid}}
<p>Height in model: {{model.user.height}}<br>
Height in changeset: {{f.model.height}}</p>
<p>Weight in model: {{model.user.weight}}<br>
Weight in changeset: {{f.model.weight}}</p>
{{/validated-form}}
{
"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-validated-form": "0.4.0"
}
}
import {
validatePresence
} from 'ember-changeset-validations/validators';
export default {
height: [validatePresence(true)],
weight: [validatePresence(true)]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment