Input Iban: Use Cases
Prefilled
export const prefilled = () => html`
<lion-input-iban .modelValue="${'NL20INGB0001234567'}" name="iban" label="IBAN"></lion-input-iban>
`;
Faulty Prefilled
export const faultyPrefilled = () => html`
<lion-input-iban
.modelValue="${'NL20INGB0001234567XXXX'}"
name="iban"
label="IBAN"
></lion-input-iban>
`;
Country Restrictions
By default, we validate the input to ensure the IBAN is valid.
To get the default feedback message for this default validator, use loadDefaultFeedbackMessages from @lion/form-core.
In the example below, we show how to use an additional validator that restricts the input-iban to IBANs from only certain countries.
export const countryRestrictions = () => {
loadDefaultFeedbackMessages();
return html`
<lion-input-iban
.modelValue="${'DE89370400440532013000'}"
.validators="${[new IsCountryIBAN('NL')]}"
name="iban"
label="IBAN"
></lion-input-iban>
<br />
<small>Demo instructions: you can use NL20 INGB 0001 2345 67</small>
`;
};
Demo instructions: you can use NL20 INGB 0001 2345 67
You can pass a single string value, or an array of strings. The latter may be useful, for example if you only want to allow BeNeLux IBANs.
export const countryRestrictionsMultiple = () => {
loadDefaultFeedbackMessages();
return html`
<lion-input-iban
.modelValue="${'DE89370400440532013000'}"
.validators="${[new IsCountryIBAN(['BE', 'NL', 'LU'])]}"
name="iban"
label="IBAN"
></lion-input-iban>
<br />
<small>Demo instructions: you can use:</small>
<ul>
<li><small>BE68 5390 0754 7034</small></li>
<li><small>NL20 INGB 0001 2345 67</small></li>
<li><small>LU28 0019 4006 4475 0000</small></li>
</ul>
`;
};
Demo instructions: you can use:
- BE68 5390 0754 7034
- NL20 INGB 0001 2345 67
- LU28 0019 4006 4475 0000
Blacklisted Country
By default, we validate the input to ensure the IBAN is valid.
To get the default feedback message for this default validator, use loadDefaultFeedbackMessages from @lion/form-core.
In the example below, we show how to use an additional validator that blocks IBANs from certain countries.
You can pass a single string value, or an array of strings.
export const blacklistedCountry = () => {
loadDefaultFeedbackMessages();
return html`
<lion-input-iban
.modelValue="${'DE89370400440532013000'}"
.validators="${[new IsNotCountryIBAN(['RO', 'NL'])]}"
name="iban"
label="IBAN"
></lion-input-iban>
<br />
<small>
Demo instructions: Try <code>RO 89 RZBR 6997 3728 4864 5577</code> and watch it fail
</small>
`;
};
Demo instructions: Try
RO 89 RZBR 6997 3728 4864 5577 and watch it fail