New Twiddle

controllers.application.js

import Ember from 'ember';

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

helpers.json.js

import { helper } from '@ember/component/helper';
import { isNone } from '@ember/utils';

export default helper((params, hash) => {
  const [json] = params;
  let { pretty } = hash;

  pretty = isNone(pretty);

  return JSON.stringify(json, null, pretty ? 2 : null);
});

models.child.js

import DS from 'ember-data';

const { Model, attr } = DS;

export default Model.extend({
  prop: attr('string', {
    defaultValue: () => {
      return '1';
    }
  })
});

models.fragment.js

import DS from 'ember-data';
import MF from 'ember-data-model-fragments';

export default MF.Fragment.extend({
  prop: DS.attr('string')
});

models.root.js

import DS from 'ember-data';

const { Model, attr, belongsTo } = DS;
import { fragment } from 'ember-data-model-fragments/attributes';

export default Model.extend({
  prop: attr('string', {
    defaultValue: () => {
      return '1';
    }
  }),
  fragment: fragment('fragment'),
  child: belongsTo('child', {
    defaultValue: () => {
      return { 'prop': '1' };
    }
  }),
});

routes.application.js

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
import Changeset from 'ember-changeset';
import lookupValidator from 'ember-changeset-validations';
import { validatePresence } from 'ember-changeset-validations/validators';


const validations = {
  'prop': [validatePresence({ presence: true, allowBlank: true })],
  'child.prop': [validatePresence({ presence: true, allowBlank: true })],
  'fragment.prop': [validatePresence({ presence: true, allowBlank: true })]
};

export default Route.extend({
  store: service(),

  model() {
    // create child
    const child = this.store.createRecord('child');

    // create a fragment
    const fragment = this.store.createFragment('fragment', {prop: null});

    // create root, with relationship and fragment
    const model = this.store.createRecord('root', { child, fragment });

    // create changeset
    const changeset = new Changeset(model, lookupValidator(validations), validations);

    changeset.validate();

    return { model, changeset };
  },

  setupController(controller, model) {
    controller.setProperties(model);
  }
});

templates.application.hbs

<div class="container my-5">

  <div class="row">
    <div class="col-7">
      <h6>property on model</h6>
    </div>
    <div class="col-7">
      <code class="small">
        model prop: {{json this.model.prop}}<br>
        changeset prop: {{json this.changeset.prop}}
      </code>
    </div>
    <div class="col-5">
      <BsForm @model={{this.changeset}} @onSubmit={{action "onSubmit"}} as |form|>
        <form.element @property="prop" @showValidation=true as |el|>
          <BsButtonGroup @value={{el.value}} class="w-100" @type="radio" @onChange={{action (mut el.value)}} as |bg|>
            <bg.button @type="primary" class="p-3" @value="1">
              one
            </bg.button>
            <bg.button @type="primary" class="p-3" @value="2">
              two
            </bg.button>
            <bg.button @type="primary" class="p-3" @value={{null}}>
              none
            </bg.button>
          </BsButtonGroup>
        </form.element>
      </BsForm>
    </div>
  </div>

  <div class="row">
    <div class="col-7">
      <h6>property on model.child</h6>
    </div>
    <div class="col-7">
      <code class="small">
        model child.prop: {{json this.model.child.prop}}<br>
        changeset child.prop: {{json this.changeset.child.prop}}
      </code>
    </div>
    <div class="col-5">
      <BsForm @model={{this.changeset}} @onSubmit={{action "onSubmit"}} as |form|>
        <form.element @property="child.prop" @showValidation=true as |el|>
          <BsButtonGroup @value={{el.value}} class="w-100" @type="radio" @onChange={{action (mut el.value)}} as |bg|>
            <bg.button @type="primary" class="p-3" @value="1">
              one
            </bg.button>
            <bg.button @type="primary" class="p-3" @value="2">
              two
            </bg.button>
            <bg.button @type="primary" class="p-3" @value={{null}}>
              none
            </bg.button>
          </BsButtonGroup>
        </form.element>
      </BsForm>
    </div>
  </div>

  <div class="row">
    <div class="col-7">
      <h6>property on model.fragment</h6>
    </div>
    <div class="col-7">
      <code class="small">
        model fragment.prop: {{json this.model.fragment.prop}}<br>
        changeset fragment.prop: {{json this.changeset.fragment.prop}}
      </code>
    </div>
    <div class="col-5">
      <BsForm @model={{this.changeset}} @onSubmit={{action "onSubmit"}} as |form|>
        <form.element @property="fragment.prop" @showValidation=true as |el|>
          <BsButtonGroup @value={{el.value}} class="w-100" @type="radio" @onChange={{action (mut el.value)}} as |bg|>
            <bg.button @type="primary" class="p-3" @value="1">
              one
            </bg.button>
            <bg.button @type="primary" class="p-3" @value="2">
              two
            </bg.button>
            <bg.button @type="primary" class="p-3" @value={{null}}>
              none
            </bg.button>
          </BsButtonGroup>
        </form.element>
      </BsForm>
    </div>
  </div>

  <code class="small">
    {{#each this.changeset.errors as |error|}}
      {{error.key}}: {{error.validation}}<br>
    {{/each}}
  </code>

  <div class="row py-5">
    <div class="col-10">
      <p>I create two models, root and child. In addition root has a data fragment.</p>
      <p>The first observation is that 'root' validates fine and only the changeset receives changes. The nested child and fragment however have their model modified, not only the changeset. I suspect that is due to the path handling quirk of changeset and maya change to `ember-bootstrap-changeset-validations` might be able to solve that...</p>
      <p>A second observation is that the nested child and fragment seem to validate the default value only and keep on using that for validations. (I don't understand that)</p>
      <p>Especially interested in why the fragments aren't validating... For now I use multiple 'flat' changeset but would rather use one to rule a complete model...</p>
    </div>
  </div>
</div>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3",
    "bootstrap": "4.3.1"
  },
  "addons": {
    "ember-data": "3.4.2",
    "ember-bootstrap": "2.8.1",
    "ember-bootstrap-changeset-validations": "2.0.0",
    "ember-changeset": "2.1.2",
    "ember-changeset-validations": "2.1.0",
    "ember-data-model-fragments": "4.0.0"
  }
}