chore: add eg for validator class that returns enum

This commit is contained in:
Konstantinos Norgias 2022-04-05 12:53:46 +02:00
parent 75065f477e
commit 5cc64991b1
2 changed files with 37 additions and 3 deletions

View file

@ -110,7 +110,7 @@ As you can see the 'validators' property expects a map (an array of arrays). So,
### Validator classes ### Validator classes
All validators extend from the default `Validator` class. Below example is an example of a validator could look like: All validators extend from the default `Validator` class. Below is an example of what a validator could look like:
```js ```js
class EqualsText extends Validator { class EqualsText extends Validator {
@ -130,6 +130,40 @@ class EqualsText extends Validator {
} }
``` ```
The `execute()` method returns a boolean by default, but it can also be customized to return enums instead. In this example below, we customize the method to return one among some possible enums as strings.
```js
class EnumOutComeValidator extends Validator {
static validatorName = 'EnumOutCome';
/**
* @param {string} modelValue
* @param {number} maxLength
* @returns {false|'overload'|'error'}
*/
execute(modelValue, maxLength) {
if (modelValue.length > maxLength) {
return 'overload';
} else if (modelValue.length < 0) {
return 'error';
}
return false;
}
/**
* @param {{outcome: 'overload'|'error'|false}} opts
*/
static async getMessage({ outcome }) {
const results = {
overload: 'Too many characters!',
error: 'Something went wrong..',
false: 'All good!',
};
return results[outcome];
}
}
```
```html ```html
<validatable-el .validators="${[new EqualsText('foo')]}"></validatable-el> <validatable-el .validators="${[new EqualsText('foo')]}"></validatable-el>
``` ```

View file

@ -50,9 +50,9 @@ export class Validator extends EventTarget {
static async = false; static async = false;
/** /**
* The function that returns a validity outcome. When we need to shpw feedback, * The function that returns a validity outcome. When we need to show feedback,
* it should return true, otherwise false. So when an error\info|warning|success message * it should return true, otherwise false. So when an error\info|warning|success message
* needs to be shown, return true. For async Validators, the function canretun a Promise. * needs to be shown, return true. For async Validators, the function can return a Promise.
* It's also possible to return an enum. Let's say that a phone number can have multiple * It's also possible to return an enum. Let's say that a phone number can have multiple
* states: 'invalid-country-code' | 'too-long' | 'too-short' * states: 'invalid-country-code' | 'too-long' | 'too-short'
* Those states can be retrieved in the getMessage * Those states can be retrieved in the getMessage