Skip to content

Instantly share code, notes, and snippets.

@lifeart
Created February 6, 2020 14:42
Show Gist options
  • Save lifeart/941c3988e152624b0f2eff385d2553d0 to your computer and use it in GitHub Desktop.
Save lifeart/941c3988e152624b0f2eff385d2553d0 to your computer and use it in GitHub Desktop.
Ember Cp Validations Octane
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import Object from "@ember/object";
import { reads } from "@ember/object/computed";
import { validator, buildValidations } from "ember-cp-validations";
import { getOwner } from "@ember/application";
const Validations = buildValidations({
billing_first_name: {
descriptionKey: "form.fields.billing_first_name",
disabled: reads('model.disableValidations'),
validators: [
validator("presence", true),
validator("length", {
min: 1,
max: 150
})
]
},
billing_last_name: {
descriptionKey: "form.fields.billing_last_name",
validators: [
validator("presence", true),
validator("length", {
min: 1,
max: 150
})
]
},
billing_city: {
descriptionKey: "form.fields.billing_city",
validators: [
validator("presence", true),
validator("inline", {
validate(){
return new Promise((resolve)=>{
setTimeout(()=>{
if (Math.random()>0.5) {
resolve(true)
} else {
resolve('Async City Validation Error');
}
}, 1000);
})
}
})
]
},
billing_address_1: {
descriptionKey: "form.fields.billing_address_1",
validators: [
validator("presence", true)
]
},
billing_postcode: {
descriptionKey: "form.fields.billing_postcode",
validators: [
validator('presence', true),
validator('length', { min: 4, max: 10}),
validator('format', {
regex: /^[0-9]*$/gi,
message: '{description} must be numeric!'
})
]
},
billing_email: {
descriptionKey: "form.fields.billing_email",
validators: [
validator('format', {
type: 'email'
})
]
},
billing_phone: {
descriptionKey: "form.fields.billing_phone",
validators: [
validator('presence', true)
]
}
});
class Form extends Object.extend(Validations) {
@tracked disableValidations = false;
@tracked billing_first_name = "";
@tracked billing_last_name = "";
@tracked billing_company = "";
@tracked billing_address_1 = "";
@tracked billing_address_2 = "";
@tracked billing_city = "";
@tracked billing_postcode = "";
@tracked billing_country = "";
@tracked billing_phone = "";
@tracked billing_email = "";
@tracked woocommerce_checkout_place_order = "";
get isInvalid() {
return this.validations.isInvalid;
}
serialize(order = {}) {
return {
customerInfo: {
firstName: this.billing_first_name,
lastName: this.billing_last_name,
company: this.billing_company,
address: this.billing_address_1,
str: this.billing_address_2,
city: this.billing_city,
postcode: this.billing_postcode,
country: this.billing_country,
phone: this.billing_phone,
email: this.billing_email,
},
order
}
}
}
export default class CheckoutComponent extends Component {
constructor() {
super(...arguments);
this.form = Form.create(getOwner(this).ownerInjection());
}
submitOrderTask(form, cart) {
const { validations } = yield this.form.validate();
if (!validations.isValid) {
this.flash.warning(validations.message);
return;
}
}
}
@Kilowhisky
Copy link

Here is my solution that seems to work. Doesn't get me tracked properties but at least keeps me one syntax or the other.

import { validator, buildValidations } from 'ember-cp-validations';
import { getOwner } from '@ember/application';

const validations = buildValidations({
    name: validator('presence', true),
    assignee: validator('presence', true)
});

const Asset = EmberObject.extend(validations, {
    assignee: null,
    name: null
});

export default class MyController extends Controller {
    asset = Asset.create(getOwner(this).ownerInjection());
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment