11bbc5fff5
* feat: migrated the navigation metadata from inline MD title decorations to frontmatter * fix: fixed frontmatter metadate for api-table MDs * fix: fixed frontmatter eslint issue
60 lines
1.3 KiB
Markdown
60 lines
1.3 KiB
Markdown
---
|
|
parts:
|
|
- Input Email
|
|
- Use Cases
|
|
title: 'Input Email: Use Cases'
|
|
eleventyNavigation:
|
|
key: 'Input Email: Use Cases'
|
|
order: 20
|
|
parent: Input Email
|
|
title: Use Cases
|
|
---
|
|
|
|
# Input Email: Use Cases
|
|
|
|
```js script
|
|
import { html } from '@mdjs/mdjs-preview';
|
|
import { Validator } from '@lion/ui/form-core.js';
|
|
import '@lion/ui/define/lion-input-email.js';
|
|
```
|
|
|
|
## Faulty Prefilled
|
|
|
|
When prefilling with a faulty input, an error feedback message will show.
|
|
|
|
Use `loadDefaultFeedbackMessages` to get our default feedback messages displayed on it.
|
|
|
|
```js preview-story
|
|
export const faultyPrefilled = () => html`
|
|
<lion-input-email .modelValue="${'foo'}" label="Email"></lion-input-email>
|
|
`;
|
|
```
|
|
|
|
## Custom Validator
|
|
|
|
```js preview-story
|
|
export const customValidator = () => {
|
|
class GmailOnly extends Validator {
|
|
static get validatorName() {
|
|
return 'GmailOnly';
|
|
}
|
|
execute(value) {
|
|
let hasError = false;
|
|
if (!(value.indexOf('gmail.com') !== -1)) {
|
|
hasError = true;
|
|
}
|
|
return hasError;
|
|
}
|
|
static async getMessage() {
|
|
return 'You can only use gmail.com email addresses.';
|
|
}
|
|
}
|
|
return html`
|
|
<lion-input-email
|
|
.modelValue="${'foo@bar.com'}"
|
|
.validators="${[new GmailOnly()]}"
|
|
label="Email"
|
|
></lion-input-email>
|
|
`;
|
|
};
|
|
```
|