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

Hi,
in typescript you can do class Form extends Model{}.
You cannot do class Form extends Model.extend(Validations) {}
because compiler will show you following error. So I am not sure if this is the best way to move forward with ember-cp-validation and glimmer components. Is there another way?

Class static side 'typeof ' incorrectly extends base class static side 'Readonly'.
Types of property 'prototype' are incompatible.
Type '' is missing the following properties from type 'Model': isEmpty, isLoading, isLoaded, hasDirtyAttributes, and 50 more.

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