Utilizes ember-validators to provide a decorator for form validation state.
npm install ember-validation-stateember-validation-state!CI

An Octane-ready decorator which provides form-field validation state by utilizing ember-validators validators.
This addon takes heavy inspiration, and is based mostly upon, the work in ember-cp-validations, but takes the reactive decorator approach rather than the Mixin approach.
* Ember.js v3.12 or above
* Ember CLI v2.13 or above
* Node.js v10 or above
```
ember install ember-validation-state
`js
import Component from '@glimmer/component';
import validationState, { validate } from 'ember-validation-state';
const Validators = {
username: [validate('presence', { presence: true })],
password: [validate('length', { min: 6 })]
};
class MyForm extends Component {
@tracked username = null;
@tracked password = null;
@validationState(Validators) validationState;
}
`
`hbs
{{#unless this.formValidState.attrs.username.isValid}}
{{#each this.formValidState.attrs.username.messages as |msg|}}
{{msg}}
You can also pass a "thunk" to the
validationState decorator, for lazy initialization of your Validators:`js
import Component from '@glimmer/component';
import validationState, { validate } from 'ember-validation-state';const Validators = {
username: [validate('presence', { presence: true })],
password: [validate('length', { min: 6 })]
};
class MyForm extends Component {
@tracked username = null;
@tracked password = null;
@validationState((component) => component.limitedValidators) validationState;
get limitedValidators() {
if (!this.args.username) {
return {
password: Validators['password']
};
}
}
}
`$3
index.d.ts for full typescript type definitions.
Intl
By default, if ember-intl is installed, validationState will attempt to look for a message for a specific validation error in your translations file. If no key is present, it will fall back to the ember-validators message.
`yaml
en-us.yml
errors:
# provide intl version of of ember-validators
blank
blank: '{description} cannot be blank'
`$3
Pass intlKey if you would like to use a different intl key. Will be prefixed with errors. for the translations file lookup`yaml
en-us.yml
errors:
username-empty: 'Gotta fill in username'
``js
import { validate } from 'ember-validation-state';const Validators = {
username: [validate('presence', { presence: true, intlKey: 'username-empty' })]
};
`$3
Pass descriptionKey if you would like to internationalize the "description" of the field. Default is "This field". Will be prefixed with errors. for the translations file lookup`yaml
en-us.yml
errors:
usernames: 'Username'
# message that
descriptionKey lookup will be inserted into
blank: '{description} cannot be blank'
``js
import { validate } from 'ember-validation-state';const Validators = {
username: [validate('presence', { presence: true, descriptionKey: 'usernames' })]
};
`
Custom validation methods
Custom validation methods can be passed in the array for a specific key. They are passed along the Messages builder for convenience.
Validator signature
`ts
interface MessageBuilder {
getMessageFor(type: string, context: object): string
}type Validator = (value: any, messages: MessageBuilder) => [boolean, string];
`In action:
`yaml
en-us.yml
errors:
password-regex: 'Password does not match required format'
``js
import Component from '@glimmer/component';
import validationState, { validate } from 'ember-validation-state';function passwordRegex(value, messages) {
return [
/W/.test(value),
messages.getMessageFor('password-regex')
];
}
const Validators = {
username: [validate('presence', { presence: true })],
password: [
validate('length', { min: 6 }),
passwordRegex
]
};
class MyForm extends Component {
@tracked username = null;
@tracked password = null;
@validationState(Validators) validationState;
}
`Usage with Typescript
This package, although not yet rewritten in Typescript, is fully compatible and exports its own types.
To have full typings support of the property initialized by
validationState, utilize the ValidationState type:`ts
import validationState, {
validate,
ValidationState,
} from 'ember-validation-state';const AttrValidators = {
name: [validate('presence', { presence: true })],
description: [validate('presence', { presence: true })],
};
export default class {
@validationState(AttrValidators)
declare formValidState: ValidationState;
}
`Utilizing the generic argument
typeof AttrValidators provides autocomplete for the formValidState.attrs` hash.See the Contributing guide for details.
This project is licensed under the MIT License.