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.

1 Answer 1

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);

    }
})
1
  • 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, 2017 at 8:50

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .