Component Validation

components.my-component.js

import Ember from 'ember';
import Validations from './validation';

export default Ember.Component.extend(Validations, {

  emailAddress:null,
  emailMessage: '',
  actions:{
  	validateByComponent(){
     	this.validate().then(({model, validations})=>{
      	if(validations.get('isValid')){
						this.set('emailMessage','');
				}
        else{
        	if(model.get('validations.attrs.emailAddress.isInvalid')){
          	this.set('emailMessage',model.get('validations.attrs.emailAddress.messages'));
          }
        }
      })
    }
  }
});

components.validation.js

import { validator, buildValidations } from 'ember-cp-validations';

export default buildValidations({
   emailAddress:[
  	validator('format',{
    	type:"email",
      message: 'This is not an email address!'
    })
  ]
});

controllers.application.js

import Ember from 'ember';

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

models.application.js

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

export default Model.extend({
  emailAddress:DS.attr('string')
});

routes.application.js

import Ember from 'ember';


export default Ember.Route.extend(Ember.Evented, {
  model(){
  	return {"emailAddress" : null }
  },
  setupController(controller,model) {//called
        console.log("super")
        this._super(...arguments);
        console.log("model is", controller,"\n", model );
    },

  actions:{ 
  	 formValidate(){
     	console.log("xxx");
       this.trigger('parentCall');
     }
    }
  }
);

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{my-component model=model}}
<br>
<br>
<button {{ action 'formValidate' }}>Validate</button>

templates.components.my-component.hbs

{{input value=emailAddress}}<br>
<div style='color: red'>
{{emailMessage}}<br>
</div>

<button {{ action 'validateByComponent' }}>Validate by Component</button>

twiddle.json

{
  "version": "0.12.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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-cp-validations":"3.4.0"
  }
}