Ember Cp Validations Octane

component.js

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;
    }
  }
}

Yeah, this is downside, maybe typescript thread able to help with it. (In discord)

Yeah, this is downside, maybe typescript thread able to help with it. (In discord)

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());
}