在多页表单中使用ember-cp-validation

Question

I have an order model that I'm collecting data for over a multi-page form. I've created some validations like this:

const Validations = buildValidations({
  // these should only be used when we’re on checkout.info route
  name: validator('presence', true),
  email: [
    validator('presence', true),
    validator('format', { type: 'email' })
  ],
  // these should only be used when we’re on checkout.shipping route
  address1: validator('presence', true),
  address2: validator('presence', true),
  city: validator('presence', true),
});

My model is set up to use them like this:

export default Model.extend(Validations, {
  // model set-up in here
})

What I'd like to happen is for it to only validate name and email when I'm on checkout.info and to validate address1 , address2 and city when I'm on checkout.shipping .

One of the things I've tried already is running the validations inside of my checkout-form component:

let { m, validations } = order.validateSync({
  on: ['name', 'email']
})
const isValid = validations.get('isValid')
order.set('didValidate', isValid)

The problem is that this doesn't seem to unblock the disabled state on my form's next button

{{next-button disabled=(v-get model.order 'isInvalid')}}

Another thing I tried was to build a custom routed-presence validator that disables presence when it's not on the current route. The trouble with this is that other validators will still block this (eg type or length).

How might I go about achieving this?

Answer 1

Although it's not well documented, you can enable or disable validations based on a condition that your model computes:

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

export default Ember.Object.extend(buildValidations({

  email: {
    disabled: Ember.computed.alias('model.isCheckoutPage'),
    validators: [
      ...
    ],
  }
}), {
  // could be a computed property too
  isCheckoutPage: false,
});