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

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