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