changeset-bootstrap-test

components.form-message.js

import Ember from 'ember';
import {
  validatePresence,
} from 'presence';
const messagesValidations = {
  username: [
    validatePresence(true),
    validateLength({ min: 4 })
  ],
    title: [
    validatePresence(true),
    validateLength({ min: 4 })
  ],
    body: [
    validatePresence(true),
    validateLength({ min: 4 })
  ],
};
export default Ember.Component.extend({
  messagesValidations,
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  newMessage: {
    username: "Me",
    title: "Title",
    body: "Body"
  }
});

presence.js

/**
 * For code taken from ember-cp-validations
 * Copyright 2016, Yahoo! Inc.
 * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 */

import Ember from 'ember';
import buildMessage from 'ember-changeset-validations/utils/validation-errors';

const {
  get,
  isPresent,
  isBlank
} = Ember;

function _isPresent(value) {
  if (value instanceof Ember.ObjectProxy || value instanceof Ember.ArrayProxy) {
    return _isPresent(get(value, 'content'));
  }

  return isPresent(value);
}

function _testPresence(key, value, presence, context = {}) {
  if (presence) {
    return _isPresent(value) || buildMessage(key, 'present', value, context);
  } else {
    return isBlank(value) || buildMessage(key, 'blank', value, context);
  }
}

export default function validatePresence(opts) {
  return (key, value) => {
    if (typeof opts === 'boolean') {
      return _testPresence(key, value, opts);
    }

    return _testPresence(key, value, opts.presence, opts);
  };
}

templates.application.hbs

Test message:

{{form-message model=newMessage }}

templates.components.form-message.hbs

{{#bs-form model=(changeset model messageValidations)}}
    {{bs-form-element label="Username" controlType="text" property="username" required=true}}
    {{bs-form-element label="Title" controlType="text" property="title" required=true}}
    {{bs-form-element label="Body" controlType="textarea" property="body" required=true}}
    {{bs-button defaultText="Submit" type="primary" buttonType="submit"}}
{{/bs-form}}

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.5.1",
    "ember-data": "2.5.5",
    "ember-template-compiler": "2.7.0"
  },
  "addons": {
    "ember-bootstrap": "^0.9.0",
    "ember-changeset": "0.13.3",
    "ember-changeset-validations": "0.9.3",
      "ember-bootstrap-changeset-validations": "0.1.0"
  }
}