Example: Custom Validation for Components in Flows
Create a custom Lightning web component for a single input on a Screen element in a flow built with Flow Bulder. The component contains custom validation.
The c-number-of-students
component contains a lightning-input
component that supports number values. The flow contains validation to check whether the component’s value is equal to another value in the flow. When an invalid value is entered, the flow sends the input validation error message to the component to be stored. The component also validates the input using the @api
validate method and displays an error message if the value is greater than 30. You can customize the error message to display above the component and to show the error message from the numStudentsErrorLabel
resource.
The HTML file defines a lightning-input
field for entering the number of students. It binds the input value to numberOfStudents
. The lightning-input
field listens for changes to trigger validation where the error message is displayed above the input component:
The JavaScript controller file manages the component's state and handles user interactions. The controller uses the numberOfStudents(updatedNumberOfStudents)
setter method to perform validation inside the component if the component’s value changes due to user input or reactivity. If the value is invalid, it sets internalErrorToRender
to the appropriate error message. The hasUserInteracted
property tracks whether the user has interacted with the component. Checking the hasUserInteracted
property prevents the component from showing an error until the user interacts with the component at least once.
The handleInputChange(event)
method is triggered when the user changes the input value for the component. It then creates a FlowAttributeChangeEvent
to notify the flow of the new value and dispatches this event. The getInternalErrorMessageIfInvalid()
method checks if the number of students exceeds 30. If the value is invalid, it returns the error message from numStudentsErrorLabel
. If the value is valid, it returns null.
The validate()
method validates the input when the flow attempts to move forward. It calls getInternalErrorMessageIfInvalid()
to get the internal error message. It returns an object with isValid
set to true if there is no internal error or set to false if an internal message exists. The errorMessage
property is set to null if there is no internal error message or set to the internal error message if one exists.
The flow calls the setCustomValidity(externalErrorMessage)
method to pass in an external error message. If an external error is currently being rendered, it updates externalErrorToRender
with the new message. It also stores the new message in cachedExternalErrorMessage
.
The flow calls the reportValidity()
method that requests the component to show all error messages. It sets externalErrorToRender
to the value stored in cachedExternalErrorMessage
and updates internalErrorToRender
with the result of getInternalErrorMessageIfInvalid()
.
The XML configuration file exposes the component to flow screens by specifying lightning\_\_FlowScreen
as a target. It also defines the numberofStudents
property for the flow to interact with.
See Also