2

Why don't <ui:inputText>, <ui:inputNumber>, and other tags' label attributes get updated for late bound attributes? (forgive me, not sure if late binding is the correct term).

Supposed I have a component like below:

Component:

<aura:component implements="forceCommunity:availableForAllPageTypes">
    <aura:attribute name="fieldLabels" type="Map"/>

    <form class="slds-form"> 
        <ui:inputText label="{!v.fieldLabels.field1}" />
        <ui:inputText label="{!v.fieldLabels.field2}" />
    </form>    

    <br />
    <div><b>Values (to see when value changes)</b></div>
    <div>fieldLabels.field1: {!v.fieldLabels.field1}</div>
    <div>fieldLabels.field2: {!v.fieldLabels.field2}</div>
    <br />
    <ui:Button label="Click me" press="{!c.buttonClicked}"/>
</aura:component>

JS Controller:

({
    buttonClicked : function(component, event, helper) {
        var fieldMap = {};
        fieldMap.field1 = 'Fullname';
        fieldMap.field2 = 'Email Address';
        component.set('v.fieldLabels', fieldMap);
    }
})

If you click on the Click me button, you will see that new values are reflected in the lower part. But input labels were not updated.

0

I worked out with by Setting a default Label value as Empty and its correctly rendering. Try like this.

In component:

<aura:component implements="forceCommunity:availableForAllPageTypes">
    <aura:attribute name="fieldLabels" type="Map"/>

    <form class="slds-form"> 
        <ui:inputNumber label="{!(v.fieldLabels.field1 ? v.fieldLabels.field1 : ' ')}" value="{!v.fieldLabels.field1}"/>
        <ui:inputText label="{!(v.fieldLabels.field2 ? v.fieldLabels.field2 : ' ')}" value="{!v.fieldLabels.field2}"/>
    </form>
    <br />

    <div><b>Values (to see when value changes)</b></div>
    <div>fieldLabels.field1: {!v.fieldLabels.field1}</div>
    <div>fieldLabels.field2: {!v.fieldLabels.field2}</div>
    <br />
    <ui:Button label="Click me" press="{!c.buttonClicked}"/>
</aura:component>

In controller:

({
    buttonClicked : function(component, event, helper) {
        var fieldMap = {};
        fieldMap.field1 = 1;
        fieldMap.field2 = 'Email Address';
        component.set('v.fieldLabels', fieldMap);

    }
})
  • thanks! but that's more of a workaround. my use case is i want to get field labels from a custom object, and use it in my lightning input form, so that they will not be hardcoded. so i would do it via map of string like Map<String,String> fieldLabels, and push it to a component attribute. – pnoytechie Mar 30 '17 at 8:50

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.