chore: add eg for validator class that returns enum
This commit is contained in:
parent
75065f477e
commit
5cc64991b1
2 changed files with 37 additions and 3 deletions
|
|
@ -110,7 +110,7 @@ As you can see the 'validators' property expects a map (an array of arrays). So,
|
|||
|
||||
### 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
|
||||
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
|
||||
<validatable-el .validators="${[new EqualsText('foo')]}"></validatable-el>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -50,9 +50,9 @@ export class Validator extends EventTarget {
|
|||
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
|
||||
* 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
|
||||
* states: 'invalid-country-code' | 'too-long' | 'too-short'
|
||||
* Those states can be retrieved in the getMessage
|
||||
|
|
|
|||
Loading…
Reference in a new issue