ember-changeset-validations tp demo

controllers.application.js

import Ember from 'ember';
import { TeamSchema } from '../models/team';
import TeamValidations from '../validations/team';

const { get, Controller } = Ember;
 
export default Controller.extend({
  TeamValidations,
  
  TeamSchema: Ember.Object.extend(TeamSchema),

  actions: {
    save(changeset) {
      changeset.validate().then(() => {
        if(get(changeset, 'isValid')) {
          cahngeset.save();
        }
      });
    },
    
    validateProperty(changeset, property) {
      return changeset.validate(property);
    },
    
    createNewTeam() {
      // create a new team 
    }
  }
});

models.team.js

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

export const TeamSchema = {
  name: attr('string')
}
export default Model.extend(TeamSchema);

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
});

templates.application.hbs

Render check

{{#with (changeset TeamSchema TeamValidations) as |changeset|}}
  <div class="col-sm-12 form-group">
		{{x-validate-input
      type="text"
      labelClass="control-label"
      placeholder="My Team"
      changeset=changeset
      property="name"
      propertyName="Team Name"
      validateProperty=(action "validateProperty" changeset "name")}}
  </div>

  <div class="col-sm-12">
    <button {{action "createNewTeam" changeset}} 
      class="btn btn-primary pull-right" 
      data-toggle="modal" 
      disabled="{{if changeset.isInvalid "true"}}">
        Create team
    </button>
  </div>

{{/with}}

templates.components.x-validate-input.hbs

<div class="form-group">
  <label for={{concat type "-" property}} class="{{labelClass}}">{{propertyName}}</label>

  <div class="{{inputContainerClass}}">
    <input
      class="form-control {{inputClass}}"
      type={{type}}
      placeholder="{{placeholder}}"
      id={{concat type "-" property}}
      value={{get changeset property}}
      oninput={{action (mut (get changeset property)) value="target.value"}}
      onblur={{action validateProperty}}>

    {{#if (get changeset.error property)}}
      <small>
      	<ul>
        	{{#each (get (get changeset.error property) "validation") as |message|}}
        		<li>{{message}}</li>
        	{{/each}}
        </ul>
      </small>
    {{/if}}
  </div>
</div>

twiddle.json

{
  "version": "0.10.4",
  "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.0",
    "ember-template-compiler": "2.6.0",
    "skeleton-css": "https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
  },
  "addons": {
    "ember-changeset-validations": "1.2.2",
    "ember-one-way-controls": "0.8.3"
  }
}

validations.team.js

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

export default {
  name: validateLength({min: 5, max: 10})
}