Changing LabelClass attribute in ui:inputText tag dynamically in Javascript

Question

I want to dynamically change the label of the following ui:inputText tag by changing the labelClass attribute.

 <ui:inputText aura:id="IdInputText" label="Label Of The Field" labelClass="Mandatory" value="{!v.onPageVariable}" keyup="{!c.getValues}" updateOn="keyup"/>

I have tried using

1. component.find("IdInputText").set("v.labelClass","BlueTag")
2. $A.util.removeClass(component.find("positionReportTo").get("v.labelClass"), 'Mandatory');
3. labelClass="{!v.isTest?'black':'red'}" 

But none of these approaches are working.

I'll just have to re-render the page or the snippet.

Any clues/Idea's doing it through javascript rather than creating another html/lightning tag or re-rendering for the label.

Answer 1

David, Out of the three approaches that you have tried only your third approach would work with ui:inputText, Also the $A.util methods such as toggleClass or removeClass will not be of much help here as they deal with the class of the element in this case its the class of the input box itself.

Short Answer for this behavior is LOCKER SERVICE & SALESFORCE AUTHORED COMPONENTS.

App / Component :

<aura:application access="global" extends="force:slds">

    <aura:attribute name="myString" type="String" />
    <aura:attribute name="isTest" type="Boolean" default="false"/>

    <ui:inputText aura:id="myinput" label="What are you thinking about ? " labelClass="{!v.isTest == true ?'blue':'red'}" value="{!v.myString}" blur="{!c.changeColor}"/>

</aura:application>

Style.css

.THIS .red {
    color : red;
}

.THIS .blue {
    color : blue;
}

This would set your label to be blue or red based on isTest Boolean value. But changing the isTest attribute inside your javascript controller and helper will not change the class. Because the class assigned to the labeClass attribute is a CONSTANT.

The ui:namespace components such as ui:inputText are salesforce authored components, it will have read access but you cannot dynamically change the attribute unless specified otherwise. For example value attribute in the ui:inputText will be a part of aura: digestCycle and any value change will get reflected, but the attribute labelClass is not listened for.

Controller.js :

changeColor : function(component,event,helper){
        component.set("v.isTest",true); 
        console.log(component.find("myinput").get("v.labelClass")); 
        component.find("myinput").set("v.labelClass","red"); 
        component.find("myinput").set("v.value","Hello World"); 
}

Take the above controller for example, it handles the onblur event from the ui:inputText.

component.set("v.isTest",true); will not set the class from red to blue when you set it to true. Because the aura framework does not have the dynamic binding between the v.labelClass and the v.isTest, as the labelClass is a constant.

console.log(component.find("myinput").get("v.labelClass")); you will be able to read the value, just not modify it.

component.find("myinput").set("v.labelClass","red"); again this will not work as the labelClass is a constant. Infact this will throw you a warning.

And finally, component.find("myinput").set("v.value","Hello World"); this will work as value attribute is a part of those attributes which can be dynamically modified.

Output when click out of the inputBox

Alternative Solution :

Probably using this HTML markup as a dynamic lightning component and pass attributes such as class, labelClass etc. Short Version : Build your own input Component with your custom namespace. It will over-come these restrictions enforced by LOCKER and allow granular control over label Class. Atleast this way its reusable. Or you could go with the re-render method as you suggested.

Answer 2

You may want to try using a combination of the following things:

1. Strategically add these SLDS CSS Classes:

   • .slds-show
   • .slds-hide
   • .slds-hidden
   • .slds-visible

2. Incorporate these $A JS Utilities:

   • $A.util.addClass(el.className)
   • $A.util.removeClass(el.className)
   • $A.util.toggleClass(el.className)

These SLDS classes when used with the $A utility classes should allow you to add, remove and toggle pretty much any CSS class you want, provided you nest your code and other Custom CSS properly within DIVs containing the above SLDS classes (or vice-versa). It's often a matter of choosing the right strategy. You may need to make one invisible while also revealing or toggling the other.

Create functions similar to below:

clickMe : function(component, event, helper) {
    el = component.find('IdInputText');
    $A.util.toggleClass(el,'slds-hide');
}

You can build these up into larger functions (creating them as helpers is a good practice) to get the ultimate effect you want by combining several helper functions.