Not able to call method on Keyup event of UI:InputText

Question

I have built a lightning prechat component for snap-ins. In this component, I am dynamically creating ui:inputtext component for all fields defined in snap-ins set up. Everything is good. I am setting the attributes for these ui:inputtext components in helper and creating these components in controller JS.

I have also put validation of red border when there is no value in these fields. Now i want to hide these validation of red border as soon as the user starts typing in the fields. I have written a method and calling it on keyup event so that validation of red border gets reset. but unfortunately,

there is one error which says

""Unable to find action 'hideerror' on the controller of ui:inputEmail"

here is my code for helper and controller

Helper code:

 getPrechatFieldAttributesArray: function(prechatFields,cmp) {
    // $A.createComponents first parameter is an array of arrays. Each array contains the type of component being created, and an Object defining the attributes.
    var prechatFieldsInfoArray = [];
    console.log('prechatFields'+JSON.stringify(prechatFields));
    // For each field, prepare the type and attributes to pass to $A.createComponents
    prechatFields.forEach(function(field) {
        if(field.label == 'Lead Address'){
            return;
        }
        var componentName = (field.type === "inputSplitName") ? "inputText" : field.type;
        var componentInfoArray = ["ui:" + componentName];
        var attributes = {
            "aura:id": "prechatField",
            updateOn:"Keyup",
            keyup:"{!c.hideerror}",
            required: field.required,
            label: field.label,
            disabled: field.readOnly,
            maxlength: field.maxLength,
            class: field.className,
            value: field.value,
            placeholder:field.label



        };

        // Special handling for options for an input:select (picklist) component
        if(field.type === "inputSelect" && field.picklistOptions) attributes.options = field.picklistOptions;

        // Append the attributes Object containing the required attributes to render this pre-chat field
        componentInfoArray.push(attributes);

        // Append this componentInfoArray to the fieldAttributesArray
        prechatFieldsInfoArray.push(componentInfoArray);
        console.log('prechatFieldsInfoArray'+JSON.stringify(prechatFieldsInfoArray));
    });

    return prechatFieldsInfoArray;
}

controller code:

 var prechatFields = cmp.find("prechatAPI").getPrechatFields();
    console.log('14prechatFields'+prechatFields.length);
    // Get pre-chat field types and attributes to be rendered
    var prechatFieldComponentsArray = hlp.getPrechatFieldAttributesArray(prechatFields,cmp);
    console.log('18Length'+prechatFieldComponentsArray.length);

    var s= prechatFields.length-1;
    console.log('size'+s);
    for(var i=0;i<s/2;i++){

        prechatFieldComponentsArray1.push(prechatFieldComponentsArray[i]);
        console.log('prechatFieldComponentsArray1'+JSON.stringify(prechatFieldComponentsArray1));
    }
    for(var j=s/2;j<s;j++){
        prechatFieldComponentsArray2.push(prechatFieldComponentsArray[j]);
        console.log('prechatFieldComponentsArray2'+JSON.stringify(prechatFieldComponentsArray2));
    }

    $A.createComponents(
        prechatFieldComponentsArray1,
        function(components, status, errorMessage) {
            if(status === "SUCCESS") {
                cmp.set("v.prechatFieldComponents", components);

            }
        }
    );
    $A.createComponents(
        prechatFieldComponentsArray2,
        function(components, status, errorMessage) {
            if(status === "SUCCESS") {
                cmp.set("v.prechatFieldComponentslist2", components);

            }
        }
    );





},
hideerror: function(cmp, evt, hlp) {
 var inputCmp = cmp.find("prechatField");

        for(var i=0;i<inputCmp.length;i++){

            if(inputCmp[i].get("v.value")===undefined || inputCmp[i].get("v.value")===''||($A.util.isEmpty(inputCmp[i].get("v.value")))){
                console.log("value"+inputCmp[i].get("v.value"));
                inputCmp[i].set("v.errors", [{message:""}]);
                $A.util.addClass(inputCmp[i], 'slds-has-error');  
            }
            else{
                inputCmp[i].set("v.errors", null);
                $A.util.removeClass(inputCmp[i], 'slds-has-error'); 
            }
        }
},

Answer 1

The issue is here

keyup:"{!c.hideerror}",

You cannot directly bind controller methods, You have to use cmp.getReference instead.

Thus your code will be

 var attributes = {
            "aura:id": "prechatField",
            updateOn:"Keyup",
            keyup:cmp.getReference("c.hideerror"),
            required: field.required,
            label: field.label,
            disabled: field.readOnly,
            maxlength: field.maxLength,
            class: field.className,
            value: field.value,
            placeholder:field.label



        };

Src : Dynamically Creating Components

Dynamically Adding Event Handlers To a Component