DDAU

controllers.application.js

import Ember from 'ember';

const presets = [
  ['John', 'Doe'],
  ['<your first name>', '<your last name>'],
  ['John', '<your last name>'],
  ['', '']
];

export default Ember.Controller.extend({
  appName: 'DDAU sandbox',
  
  firstNamePreset: '',
  lastNamePreset: '',

  actions: {
    preset (index) {
      this.setProperties({
        'firstNamePreset': presets[index][0],
        'lastNamePreset': presets[index][1]
      });
    }
  }
});

ddau-form.component.js

import Ember from 'ember';

export default Ember.Component.extend({

  firstName: '',
  firstNameError: '?',
  lastName: '',
  lastNameError: '?',

  classNameBindings: ['isFormValid::error'],

  fullName: Ember.computed('firstName', 'lastName', function () {
    return this.get('firstName') + ' ' + this.get('lastName');
  }),

  isFormValidated: Ember.computed('firstNameError', 'lastNameError', function () {
    return this.get('firstNameError') !== '?' && this.get('lastNameError') !== '?';
  }),

  isFormValid: Ember.computed('firstNameError', 'lastNameError', function () {
    return this.get('firstNameError') === null && this.get('lastNameError') === null;
  }),

  validationMessage: Ember.computed('isFormValidated', 'isFormValid', 'fullName', function () {
    return this.get('isFormValidated')
      ? (this.get('isFormValid')
           ? 'The form is valid and your full name is ' + this.get('fullName')
           : 'There are errors - check all fields')
      : 'The form has not been fully validated'
  }),

  actions: {
    firstNameChanged (name, error) {
      this.setProperties({
        'firstName': name,
        'firstNameError': error
      });
    },

    lastNameChanged (name, error) {
      this.setProperties({
        'lastName': name,
        'lastNameError': error
      });
    }
  }
});

ddau-form.template.hbs

{{ddau-item label="First name" value=firstName changedAction="firstNameChanged"}}
{{ddau-item label="Last name" value=lastName changedAction="lastNameChanged"}}
<div class="validation-message">{{validationMessage}}</div>

ddau-item.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  label: '',
  itemValue: Ember.computed.oneWay('value'),

  classNameBindings: ['error:error'],

  error: Ember.computed('itemValue', function () {
    let value = this.get('itemValue');
    return Ember.isBlank(value)
      ? 'Value must not be blank'
      : (/^[a-z]+$/i.test(value)
        ? null
        : 'Value must contain only ASCII characters');
  }),

  syncUp: function () {
    Ember.run.scheduleOnce('afterRender', this, () => {
      this.sendAction('changedAction', this.get('itemValue'), this.get('error'));
    });
  },

  didReceiveAttrs () {
    this._super(...arguments);
    this.syncUp();
  },

  onChange: function () {
    this.syncUp();
  }.observes('itemValue')
});

ddau-item.template.hbs

<label>{{label}}</label>{{input value=itemValue}}
{{#if error}}<span class="error-message">{{error}}</span>{{/if}}

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

div {
  padding: 0.5em;
}

label {
  margin-right: 0.5em;
}

div.error {
  background-color: #faa;
}

.error-message {
  margin-left: 0.5em;
  color: #f00;
}

.validation-message {
  font-style: italic;
}

templates.application.hbs

<h1>{{appName}}</h1>
<div class="presets">
  <button {{action "preset" 0}}>PRESET 1</button>
  <button {{action "preset" 1}}>PRESET 2</button>
  <button {{action "preset" 2}}>PRESET 3</button>
  <button {{action "preset" 3}}>PRESET 4</button>
</div>
{{ddau-form firstName=firstNamePreset lastName=lastNamePreset}}

twiddle.json

{
  "version": "0.7.2",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.3/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember-template-compiler.js"
  }
}