I'm trying to understand how to add custom error messaging to the lightning:select base component.

I understand that I can use the validity object to check if there is bad data and set a respective custom message. What I am having trouble understanding is how to apply it to this scenario:

  1. I have a lightning:select component defined with the values "Red,Blue,Green".
  2. Because I want to force a selection, I've added "-- None --" as the first value in the list.
  3. So I have "-- None --,Red,Blue,Green"

How do I tell the base component that "-- None --" is invalid and an error needs to be shown?



The magic happens when you combine the required, onchange, and messageWhenValueMissing attributes together.

<aura:attribute name="colors" type="String[]" default="Red,Green,Blue"/>
<lightning:select aura:id="select" name="select" 
                  label="Select a Color" 
                  required="true" onchange="{! c.onChange }" 
                  messageWhenValueMissing="Choose one!">
    <option value="">-- None --</option>
    <aura:iteration items="{!v.colors}" var="color">
            <option value="{!color}" text="{!color}"></option>

The error message specified by messageWhenValueMissing is shown when the first option is selected. You can also pair this solution with the showHelpMessageIfInvalid method to trigger the error from your JS controller.

Credits to @Eugene Kashida.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.