1

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)

5
  • Are you saying this is your issue -- input.get('v.value')? I doubt if that's the one. Is this your exact code? E.g., I see controller="cntrlr.cls", which is syntactically incorrect and I think won't let you save the component.
    – Jayant Das
    Jun 4 '19 at 15:19
  • I replaced some distinguishing names for privacy. I will update it to make sense. Also, I've updated it to say input.set('') which is where I'm seeing the issue, not input.get(), thanks for pointing that out. I can verify that I get the error only when the input.set('') lines are not commented out Jun 4 '19 at 15:22
  • It worked when you removed the comment marks from these lines? //input.set('v.errors',[{message:'Please name your search before saving'}]); and //input.set('v.errors', null); Jun 4 '19 at 15:28
  • So your error is not on input.get but input.set, right?
    – Jayant Das
    Jun 4 '19 at 15:30
  • That is correct Jun 4 '19 at 15:31
2

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.

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.