ember-changeset

components.person-form.js

import Ember from 'ember';

const { computed, inject } = Ember;

export default Ember.Component.extend({
  actions: {
    cancel() {
     	this.get('model').rollback();
    },
    save() {
      this.sendAction('save', this.get('model'));
    }
  },
  availableProfessions: computed(function() {
    return this.get('store').findAll('profession');
  }),
  store: inject.service()
});

controllers.application.js

import Ember from 'ember';
import PersonValidations from '../validations/person';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  PersonValidations
});

mirage.config.js

export default function() {
  this.resource('people');
  this.resource('professions');
};

mirage.models.person.js

import { Model, belongsTo } from 'ember-cli-mirage';

export default Model.extend({
  profession: belongsTo('profession')
});

mirage.models.profession.js

import { Model, hasMany } from 'ember-cli-mirage';

export default Model.extend({
  persons: hasMany('person')
});

mirage.scenarios.default.js

export default function(server) {
  let dentist = server.create('profession', {
    name: 'dentist'
  });
  server.create('profession', { name: 'student' });
  server.create('profession', { name: 'teacher' });
  server.create('person', {
    age: 28,
    firstName: 'Max',
    lastName: 'Mustermann',
    profession: dentist
  });
};

models.person.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  age: attr('number'),
  firstName: attr('string'),
  lastName: attr('string'),
  profession: belongsTo()
});

models.profession.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  name: attr('string'),
  persons: hasMany('person')
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    create(changeset) {
      this.store.createRecord('person', changeset.get('change')).save();
    },
    save(changeset) {
      changeset.save();
    }
  },
  model() {
    return this.store.findAll('person');
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<table class="table">
	<thead>
  	<tr>
    	<th>first name</th>
      <th>last name</th>
      <th>age</th>
      <th>profession</th>
    </tr>
  </thead>
  <tbody>
  	{{#each model as |person|}}
    	<tr>
        <td>{{person.firstName}}</td>
        <td>{{person.lastName}}</td>
        <td>{{person.age}}</td>
        <td>{{person.profession.name}}</td>
      </tr>
    {{/each}}
  </tbody>
</table>

{{person-form model=(changeset model.firstObject PersonValidations) save=(route-action 'save')}}

{{person-form model=(changeset (hash ) PersonValidations) save=(route-action 'create') create=true}}

<div id="ember-basic-dropdown-wormhole"></div>

templates.components.person-form.hbs

{{#bs-form model=model onSubmit=(action 'save') as |form|}}
	{{form.element label='first name' property='firstName'}}
  {{form.element label='last name' property='lastName'}}
  {{form.element controlType='number' label='age' property='age'}}
  {{#form.element property='profession' label='profession' as |value|}}
  	{{#power-select
    	options=availableProfessions
      onchange=(action (mut model.profession))
      selected=model.profession
      as |option|
    }}
    	{{option.name}}
    {{/power-select}}
  {{/form.element}}
  {{#bs-button onClick=(action 'cancel')}}Cancel{{/bs-button}}
  {{bs-button buttonType='submit' defaultText=(if create 'Create' 'Save')}}
{{/bs-form}}

twiddle.json

{
  "version": "0.11.0",
  "EmberENV": {
  	"EXTEND_PROTOTYPES": {
      "Date": false
    },
    "FEATURES": {}
  },
  "ENV": {
    "ember-cli-mirage": {
      "enabled": true
    }
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.6.2",
    "ember-data": "2.6.2",
    "ember-template-compiler": "2.6.2",
    "ember-testing": "2.6.2"
  },
  "addons": {
    "ember-bootstrap": "1.0.0-alpha.4",
		"ember-bootstrap-changeset-validations": "1.0.0-alpha",
		"ember-changeset": "1.2.2",
		"ember-changeset-validations": "1.2.5",
    "ember-cli-mirage": "*",
    "ember-power-select-with-create": "*",
    "ember-route-action-helper": "2.0.2"
  }
}

validations.person.js

import {
  validatePresence,
  validateNumber
} from 'ember-changeset-validations/validators';

export default {
  age: validateNumber({ gte: 18 }),
  firstName: validatePresence(true),
  lastName: validatePresence(true),
  profession: validatePresence(true)
}