Custom error message not being displayed in a table cell in lightning component

Question

I have the following piece of code

<aura:iteration items="{!v.wrapAccountList}" var="arItem" indexVar="index">  
                <tr>
                    <td>
                        <lightning:select name="rejectReasonPick" label="" aura:id="rejectrn" value="{!arItem.acc.rejectReason}">
                    </td>
<td>
<button aura:id="addButton" iconName="action:close" alternativeText="Reject" data-index="{!index}" onclick="{!c.actionOnReject}">Reject</button>
</td>
</tr>

.......

I have the following code in my jscontroller/helper

actionOnRejectHelper : function(component, event, helper) {
    event.preventDefault();
    var whichOne = event.currentTarget.dataset.index;
    console.log(whichOne);

    var wrapperList = component.get("v.wrapAccountList");//Here wrapAccountList is the wrapper list that was being iterated in the component
    var rejectReason = wrapperList[whichOne].acc.rejectReason;
    var accountRequestId = wrapperList[whichOne].acc.Id;

    var rejectren = component.find("rejectrn");
    console.log('rejectren'+rejectren[whichOne].value);
    if(rejectReason == ""){
        rejectren[whichOne].set("v.errors", [{message:"Please enter value"}]);
        console.log('rejectren[whichOne]'+rejectren[whichOne]);
        $A.util.addClass(rejectren[whichOne], 'slds-has-error');//add red border
    }
    else{
       $A.util.removeClass(rejectren[whichOne], "slds-has-error"); // remove red border
       $A.util.addClass(rejectren[whichOne], "hide-error-message"); 

//Rest of the code
       },

Here my issue is that

$A.util.addClass(rejectren[whichOne], 'slds-has-error'); 

is working and the field is being marked with red highlight.

However, the line above is not working

rejectren[whichOne].set("v.errors", [{message:"Please enter value"}]);

Error message is not being displayed

Where am I going wrong in this?

Answer 1

For adding custom error messages you might need to add either span or div html tags with proper formatting just above your component.

<div aura:id="error" class="slds-hide format-error-text">Show This error</div>
<lightning:select name="rejectReasonPick" label="" aura:id="rejectrn" value="{!arItem.acc.rejectReason}" />

Then in your controller you can access the error component and either show or hide it.

if(rejectReason == ""){
        //rejectren[whichOne].set("v.errors", [{message:"Please enter value"}]);
        $A.util.addClass(errorDiv[whichOne],"slds-show");
        console.log('rejectren[whichOne]'+rejectren[whichOne]);
        $A.util.addClass(rejectren[whichOne], 'slds-has-error');//add red border
    }

Hope this helps!

Answer 2

AFAIK the errors attribute only relates to (and is only documented for) components such as ui.inputNumber.

lightning:select has some standardised error handling when required is set. It is also possible to customise the message using messageWhenValueMissing. You should be able to use these.

(Incidentally, lightning:input uses a validity object to present a number of standard errors but I have found no way to set values that results in a custom error message being presented. But I would be happy to be proven wrong about that.)