ember-changeset-validations demo

controllers.application.js

import Ember from 'ember';
import userValidations from '../validations/user';
const { get } = Ember;

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  init() {
  	this._super(...arguments);
    this.userValidations = userValidations;
  },
  
  actions: {
  	save(changeset) {
    	return changeset
        .validate()
        .then(() => {
          if (get(changeset, 'isValid')) {
            debugger
            return changeset.execute();
          }
        }).catch((error) => {
          throw new Error(error);
        });
    },
    
    reset(changeset) {
      return changeset.rollback();
    }
  }
});

models.user.js

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

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

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.get('store').createRecord('user', {
      firstName: 'Jim',
      lastName: 'Bob',
      age: 10
    });  
  }
});

templates.application.hbs

<h2>Data: {{model.firstName}} {{model.lastName}}, age {{model.age}}</h2>
ember-changeset and ember-changeset-validations provide an easy way to validate and set changes to your data. Unlike CP or observer based validations, you don't need to write anything special to prevent data from immediately becoming invalid. Validators are simply functions, no CPs or observers required. Changesets are DDAU by default, even without using one way inputs.
<hr>
<h3>Edit user</h3>
{{#with (changeset model userValidations) as |changeset|}}
  {{form-errors changeset=changeset}}
  {{input type="text" value=changeset.firstName}}
  {{input type="text" value=changeset.lastName}}
  {{input type="number" value=changeset.age}}
  <br>
  <br>
  <div>
  	<button {{action "save" changeset}} disabled={{changeset.isInvalid}}>Save</button>
  	<button {{action "reset" changeset}}>Reset</button>
	</div>
{{/with}}

templates.components.form-errors.hbs

{{#if changeset.isInvalid}}
  <p>There were one or more errors in your form.</p>
  <ul>
    {{#each changeset.errors as |error|}}
      <li>{{error.validation}}</li>
    {{/each}}
  </ul>
{{/if}}

twiddle.json

{
  "version": "0.10.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.6.0",
    "ember-data": "2.6.1",
    "ember-template-compiler": "2.6.0"
  },
  "addons": {
  	"ember-changeset": "0.10.3",
    "ember-changeset-validations": "0.6.2"
  }
}

validations.user.js

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

export default {
	firstName: [
    validatePresence(true),
    validateLength({ min: 2 })
  ],
  lastName: [
    validatePresence(true),
    validateLength({ min: 2 })
  ],
  age: validateNumber({ gte: 18 })
}