ayo/lion

Thomas Allmer ec8da8f12c feat: release inital public lion version

Co-authored-by: Mikhail Bashkirov <mikhail.bashkirov@ing.com>
Co-authored-by: Thijs Louisse <thijs.louisse@ing.com>
Co-authored-by: Joren Broekema <joren.broekema@ing.com>
Co-authored-by: Gerjan van Geest <gerjan.van.geest@ing.com>
Co-authored-by: Erik Kroes <erik.kroes@ing.com>
Co-authored-by: Lars den Bakker <lars.den.bakker@ing.com>

2019-04-26 10:37:57 +02:00

1.8 KiB

Raw Blame History

Interaction States

InteractionStateMixin saves meta information about interaction states. It allows the Application Developer to create advanced UX scenarios. Examples of such scenarios are:

show the validation message of an input only after the user has blurred the input field
hide the validation message when an invalid value becomes valid
show a red border around the input right after the input became invalid

The meta information that InteractionStateMixin collects, is stored in the properties:

touched : the user blurred the field
dirty : the value in the field has changed
prefilled : a prepopulated field is non empty

Listenening for changes

Application Developers can subscribe to the events touched-changed and dirty-changed.

Advanced use cases

Overriding interaction states

When creating a custom wrapper or platform wrapper, it can be needed to override the way prefilled values are 'computed'. The example below shows how this is done for checkboxes/radio-inputs.

/**
 * @override
 */
static _isPrefilled(modelValue) {
  return modelValue.checked;
}

How interaction states are preconfigured

We show the validity feedback when one of the following conditions is met:

prefilled: The user already filled in something, or the value is prefilled when the form is initially rendered.
touched && dirty && !prefilled: When a user starts typing for the first time in a field with for instance required validation, error message should not be shown until a field becomes touched (a user leaves(blurs) a field). When a user enters a field without altering the value (making it dirty but not touched), an error message shouldn't be shown either.
submitted: If the form is submitted, always show the error message.

1.8 KiB Raw Blame History