Input Email: Use Cases
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.
export const faultyPrefilled = () => html`
<lion-input-email .modelValue="${'foo'}" label="Email"></lion-input-email>
`;
Custom Validator
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>
`;
};