anypoint-web-components
ValidatorMixin
Use ValidatorMixin to implement a custom input/form validator. Element instances implementing this mixin will be registered for use in elements that implement ValidatableMixin.
Installation
npm i @anypoint-web-components/validator-mixin --saveUsage
Validator name
By default it takes lower case name of current HTML element. If this class
is used outside custom elements environment then it uses static is property
to get the name of the mixin.
static get is() {
return 'my-validator';
}Deregistering validator
When an instance of a validator is created it is being stored in a global validators cache
controlled by the ValidatorStore module.
After registering the validator in the global store it is not tied to component's life cycle methods (it can extend an Object instead of HTMLElement). Also, usually validator stays in the document for the entire life cycle of the web app. But if you need to un-register the validator then call instance.unregister() function
and detach this element from the DOM or remove references to the object so it can be GC'd.
You can also do this by calling ValidatorStore.unregister(instance).
In a LitElement
import { LitElement } from 'lit-element';
import { ValidatorMixin } from '@anypoint-web-components/validator-mixin';
class CatsOnly extends ValidatorMixin(LitElement) {
validateObject(obj) {
return !Object.keys(obj).some((key) => obj[key].match(/^(c|ca|cat|cats)?$/) === null);
}
validateArray(value) {
return !value.some((value) => value.match(/^(c|ca|cat|cats)?$/) === null);
}
validate(values) {
if (Array.isArray(values)) {
return this.validateArray(values);
}
if (typeof values === 'object') {
return this.validateObject(values);
}
return values.match(/^(c|ca|cat|cats)?$/) !== null;
}
}
window.customElements.define('cats-only', CatsOnly);Development
git clone https://github.com/anypoint-web-components/validator-mixin
cd validator-mixin
npm installTesting
npm testDemo
npm start