+ Start a Discussion
Pedro Garcia GPedro Garcia G 

aura:component blur event get

Hi...

I'm calling a controller function in the client - side from blur event in the component.

component code 
<div class="slds-form-element slds-grid slds-wrap">
                                    <div class="slds-form-element__control slds-grow">
                                        <ui:inputText class="slds-input inputFieldWidth"
                                                      labelClass="slds-form-element__label slds-form-element__label_edit slds-no-flex"
                                                      aura:id="inputId"
                                                      blur ="{!c.closeNameBox}"
                                                      change="{!c.onNameChange}"
                                                      maxlength="17"
                                                      required="true"
                                                      label="Tracking #"
                                                      value="{!v.singleRec.Shipping_Track_Number__c}" />
                                    </div>
                                </div>

In the controller:
onNameChange : function(component,event,helper){ 
        // if edit field value changed and field not equal to blank,
        // then show save and cancel button by set attribute to true

        if(event.getSource().get("v.value").trim() != ''){ 
            component.set("v.showSaveCancelBtn",true);

        }

    },   
    
    closeNameBox : function (component, event, helper) {

      // on focus out, close the input section by setting the 'nameEditMode' att. as false   
        component.set("v.nameEditMode", false); 
      // check if change/update Name field is blank, then add error class to column -
      // by setting the 'showErrorClass' att. as True , else remove error class by setting it False   

        if(event.getSource().get("v.value").trim() == 0){
            component.set("v.showErrorClass",true);
        }else{
            component.set("v.showErrorClass",false);
        }
    }

I got the error: Cannot read property 'trim' of undefined. So, the event.getSource() return undefined...

Note: The <input... component is inside a <aura:iteration... so the aura:id="inputId" is the same for all input. I don't know if this is the reason for the error.

Please, let me know if you need more code...

Thanks,


 
Best Answer chosen by Pedro Garcia G
Ravi Dutt SharmaRavi Dutt Sharma
In place of line 19, try this and let me know if it works. Thanks.
 
if(event.getSource().get("v.value") && event.getSource().get("v.value").trim() == 0)

 

All Answers

Ravi Dutt SharmaRavi Dutt Sharma
In place of line 19, try this and let me know if it works. Thanks.
 
if(event.getSource().get("v.value") && event.getSource().get("v.value").trim() == 0)

 
This was selected as the best answer
Pedro Garcia GPedro Garcia G
WORKS!!!! Thank you!...