ember-cp-validate-example

components.booking-form.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  // Passed in
  reservation: null,
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'cp validate example',
});

models.reservation.js

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

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

const Validations = buildValidations({
  name: [
    validator('presence', true),
    validator('length', {
      min: 4,
      max: 8
    }),
	],
  other: [
    validator('presence', true),
	],
});

export default Model.extend(Validations, {
  name: attr('string'),
  other: attr('string'),
});

router.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('booking', {path: '/'});
});

export default Router;

routes.booking.js

import Ember from 'ember';

export default Ember.Route.extend({
  
  model() {
    return this.store.createRecord('reservation');
  },

});

templates.application.hbs

<h1>{{appName}}</h1>

<br>
{{outlet}}


<br>
<br>
<br>
Check out the twiddle.json - for an example of how you import things in this sandbox.

templates.booking.hbs

<h2>Booking</h2>

{{booking-form reservation=model}}

templates.components.booking-form.hbs

<h3>Booking form...</h3>

<label for='name'>
	<div class='label'>
  	<span>Name</span>
    {{reservation.validations.attrs.name.message}}
    {{!-- {{v-get reservation 'name' 'message'}} --}}
  </div>
	{{input id='name' value=reservation.name}}
</label>

<label for='other'>
	<div class='label'>
  	<span>Other</span>
    {{reservation.validations.attrs.other.isValid}}
  </div>
	{{input id='other' value=reservation.other}}
</label>

<footer>
	<p>Not sure how this could be true...</p>
	isValid: {{reservation.validations.isValid}}
  
  <button disabled={{reservation.validations.isInvalid}}>
  	Submit
  </button> {{if reservation.validations.isInvalid 'button disabled'}} 
</footer>

{{!-- 

{{v-get reservation 'isValid'}} // why you no worky?

--}}

{{log "reservation" reservation}}
{{log "reservation.validations" reservation.validations}}

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"
  },
  "addons": {
    "ember-data": "3.4.2",
    "ember-cp-validations": "4.0.0-beta.1"
  }
}