10

I'm messing with Lightning Components doing some very angular-ish things. I like that we can use two-way binding with the "updateon" tag.

Here's my code:

<aura:component >
  <aura:attribute name="number1" type="integer" default="2"/>
  <aura:attribute name="number2" type="integer" default="2"/>

  <div>this is a 2-way bind test</div>
  <ui:inputNumber label="Number 1" value="{!v.number1}" required="true" updateOn="keyup" />
  <ui:inputNumber label="Number 2" value="{!v.number2}" required="true" updateOn="keyup" />

  <ui:outputNumber  value="{!add(v.number1, v.number2)}"/>

I tried that expression being {!v.number1 + v.number2} first, and that didn't work.

What's REALLY strange is that defaulting them both to 2 in the attributes will start with 4 (not 22) as expected.

But once you do any typing in the inputs, it's just doing string concat: even if you change them both back to 2 it'll be 22. (insert Taylor Swift joke here:)

How do I keep them as integers? I could do this by building all sorts of setter/getter on the controller and casting, but I don't want to. I want to use just expressions like Angular can.

Tried so far: using the "format" parameter on the outputNumber. 22.0 there

9

There is a bug in the way that the components and expressions interact. The input field being used by the component is returning a string, and it's not properly coercing the value into the number (or other) type.

There are a couple of ways to workaround this, but keep in mind that neither of these examples are doing error checking, type validation, etc.:

  1. Multiple each value by 1:

    <ui:outputNumber value="{!(v.value1 * 1) + (v.value2 * 1)}"/>

  2. Use a change handler for the attribute value and coerce it as needed. This is obviously heavier-weight and more difficult to use.

0

try this in controller

({
    CalcSum : function(component) {

        var Sum=parseInt(component.get("v.number1"))+parseInt(
                 component.get("v.number2"));
        component.set("v.Sum",Sum);
    }
})

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.