Aura Component Field Validation Error

Question

I am tryin to handle field validation for a lightning:input field in a custom aura component. I've referenced the validating fields documentation with no success. I find my lightning:input component in my JS controller, pull it's value, but when i try to conditionally set the error message, I get an error:

Uncaught Action Failed... [Cannot read property 'config' of undefined]"

Here's my component markup:

<aura:component controller="cntrler" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" description="desc" access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <aura:attribute name="savedSearchSelected" type="Boolean" default="true" description="Tracks whether the user is filtering a saved search or performing a new search" />

    <aura:renderIf isTrue="{!v.savedSearchSelected == false}">
        <div class="slds-size_1-of-1">
            <div class="slds-m-around_x-small">
                <lightning:input name="search-name" value="{!v.savedSearchName}" placeholder="Name your search, if you'd like" aura:id="search-name"/>
            </div>
        </div>
    </aura:renderIf>
</aura:component>

Javascript Controller

({
    saveSearch : function(component, event, helper) {
        var input = component.find('search-name');
        var searchName = input.get('v.value')
        console.log(input, searchName); 
        if(helper.isEmpty(searchName)){
            console.log('empty name');
            //input.set('v.errors',[{message:'Please name your search before saving'}]);
        } else {
            //input.set('v.errors', null);
        }
    }
})

The input.set() lines in the controller are what's causing the error. Why am I not able to use this component.set() method when I am successfully retrieving the component (as shown by my console.log and even the .get value from that component in the line prior)

Answer 1

Based on your comments, the issue is on the line where you are setting the error on your lightning:input component as:

input.set('v.errors',[{message:'Please name your search before saving'}]);

in this case the error you are receiving is the expected behavior.

var input = component.find('search-name'); will return a lightning:input component. And that a lightning:input component does not have a property errors which can be set here thus resulting in error.

The errors attribute was/is only present for ui:input as mentioned in Validating Fields documentation. The documentation also states that ui namespace is being deprecated with API v46.0.

Components in the ui namespace are deprecated as of API version 46.0

---

So, if you want to set an error message on the lightning:input component, you will need to use setCustomValidity() here as below:

input.setCustomValidity("your message here"); 

Take a look at the Custom Validity Error Messages section in the lightning:input documentation for details.