ember-changeset-validations demo

controllers.application.js

import Ember from 'ember';
import AdultValidations from '../validations/adult';
import ChildValidations from '../validations/child';
const { get } = Ember;

export default Ember.Controller.extend({
  AdultValidations,
  ChildValidations,
  
  actions: {
    save(changeset) {
      return changeset
        .validate()
        .then(() => {
          if (get(changeset, 'isValid')) {
            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

<p><code>ember-changeset</code> and <code>ember-changeset-validations</code> 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.</p>

<hr>

{{edit-user 
		user=model
    validations=AdultValidations
    type="adult"
    save=(action "save")
    reset=(action "reset")
}}

templates.components.edit-user.hbs

<h4>{{type}}: <code>{{user.firstName}} {{user.lastName}}, age {{user.age}}</code></h4>
{{#with (changeset user validations) as |changeset|}}
  {{form-errors changeset=changeset}}
  	
  <label for="{{type}}-first-name">First name</label>
  {{one-way-input id=(concat type "-first-name") class="u-full-width" type="text" value=changeset.firstName update=(action (mut changeset.firstName))}}
  
	<label for="{{type}}-last-name">Last name</label>
  {{one-way-input id=(concat type "-last-name") class="u-full-width" type="text" value=changeset.lastName update=(action (mut changeset.lastName))}}
    
  <label for="{{type}}-age">Age</label>
  {{one-way-input id=(concat type "-age") class="u-full-width" type="number" value=changeset.age update=(action (mut changeset.age))}}
  
	<div class="row">
  	<button {{action save changeset}} disabled={{changeset.isInvalid}} class="button-primary">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",
    "skeleton-css": "https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
  },
  "addons": {
  	"ember-changeset": "0.11.0",
    "ember-changeset-validations": "0.6.4",
    "ember-one-way-controls": "0.8.3"
  }
}

validations.adult.js

import Ember from 'ember';
import { validateNumber } from 'ember-changeset-validations/validators';
import UserValidations from './user';

const { assign } = Ember;

export default assign({}, UserValidations, {
  age: validateNumber({ gte: 18 })
});

validations.child.js

import Ember from 'ember';
import { validateNumber } from 'ember-changeset-validations/validators';
import UserValidations from './user';

const { assign } = Ember;

export default assign({}, UserValidations, {
  age: validateNumber({ lt: 18 })
});

validations.user.js

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

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