1

I am trying to set a value of an attribute via a ui:inputRadio component and an onchange listener. However, the component is not behaving like I expected it to.

TestApp.app

<aura:application >
    <ltng:require scripts="{!$Resource.jquery}" afterScriptsLoaded="{!c.doInit}" />
    <aura:attribute name="radiochoice" type="Integer" default="0"/>

  <fieldset class="slds-form-element">
      <label class="slds-form-element__label" for="select-01"> </label>
      <div class="slds-form-element__control">
          <label class="slds-radio">
              <ui:inputRadio name="options" value="1" change="{!c.onGroup}"/>
              <span class="slds-radio--faux"></span>
              <span class="slds-form-element__label">Choice 1</span>
          </label>
          <label class="slds-radio">
              <ui:inputRadio name="options" value="2" change="{!c.onGroup}"/>
              <span class="slds-radio--faux"></span>
              <span class="slds-form-element__label">Choice 2</span>
          </label>
      </div>
  </fieldset>
  <p>{!v.radiochoice}</p>
</aura:application>

TestAppController.js

({
    doInit : function(cmp, event, helper) {
    },

  onGroup: function(cmp, evt) {
    var elem = evt.getSource();
    console.log(evt);
    console.log(elem);
    console.log(elem.get("v.body"));
    console.log(elem.get("v.class"));
    console.log(elem.get("v.label"));
    console.log(elem.get("v.name"));
    console.log(elem.get("v.text"));
    console.log(elem.get("v.value"));
    console.log($("input[name='options']:checked").val());
    cmp.set("v.radiochoice", elem.get("v.text"));
  },
})

I should be seeing a 1 in the output somewhere in the log when I run this, but instead I get

components/mynamespace/Testapp.js:13 Object {}
components/mynamespace/Testapp.js:14 Object {}
components/mynamespace/Testapp.js:15 []
components/mynamespace/Testapp.js:16 undefined
components/mynamespace/Testapp.js:17 undefined
components/mynamespace/Testapp.js:18 options
components/mynamespace/Testapp.js:19 undefined
components/mynamespace/Testapp.js:20 true
components/mynamespace/Testapp.js:21 undefined

The documentation at Aura ui:inputRadio documentation says the "text" attribute contains the input value attribute, but for some reason it returns undefined even though I specified a value for each radio button.

On a side note, the example code in the documentation does not work..

var elem = evt.getSource().getElement();

throws an exception as the object returned by calling getSource() on the event does not have a getElement function.. Even if that were fixed, the code still would not run since LockerService runs in strict mode and resultCmp is not declared before being used..

1

I think the problem is, that value is of type boolean and thus only can have the values "true" or "false". Could you try this:

<aura:application >
    <ltng:require scripts="{!$Resource.jquery}" afterScriptsLoaded="{!c.doInit}" />
    <aura:attribute name="radiochoice" type="Integer" default="0"/>

  <fieldset class="slds-form-element">
      <label class="slds-form-element__label" for="select-01"> </label>
      <div class="slds-form-element__control">
          <label class="slds-radio">
              <ui:inputRadio name="options" value="true" change="{!c.onGroup}"/>
              <span class="slds-radio--faux"></span>
              <span class="slds-form-element__label">Choice 1</span>
          </label>
          <label class="slds-radio">
              <ui:inputRadio name="options" value="2" change="{!c.onGroup}"/>
              <span class="slds-radio--faux"></span>
              <span class="slds-form-element__label">Choice 2</span>
          </label>
      </div>
  </fieldset>
  <p>{!v.radiochoice}</p>
</aura:application>
5
  • but isn't the "value" attribute of the inputRadio component different from the actual VALUE of the input? as in there is the value of the input, and there is the value of the component which states whether the radio button is selected.
    – Jason Lee
    Jun 21 '16 at 17:29
  • No, value is just that. You are even debugging it yourself. From your console log: Elem.get(v.value) = true. Try to put value="true" and see if text is still undefined(haven't tried it myself) Jun 21 '16 at 18:01
  • Ah I think I get it now.. to set the value of the actual input element, you need to set the "text" attribute, not the "value" attribute..
    – Jason Lee
    Jun 21 '16 at 18:11
  • 1
    Did you try it? Did it work? Would be interesting, as then the documentation is quite wrong Jun 21 '16 at 18:27
  • Yep it works... The documentation is already wrong anyways haha..
    – Jason Lee
    Jun 21 '16 at 18:28
2

In Lightning, value always mean what changes when you interact with an input component (it's the state of the component), and text means the associated string representation, if applicable, which doesn't change with interaction.

Since the attribute text is not set on the <ui:inputRadio>, its value is undefined, and the behavior described above is normal. Setting the value of text does solve the problem:

<ui:inputRadio name="options" value="1" change="{!c.onGroup}" text="Choice 1"/>
<ui:inputRadio name="options" value="1" change="{!c.onGroup}" text="Choice 2"/>

The Lightning Component API is different than the DOM API. The <ui:inputRadio> component is defined here:

https://github.com/forcedotcom/aura/blob/master/aura-components/src/main/components/ui/inputRadio/inputRadio.cmp

It does implement, as most input components, the following interface:

https://github.com/forcedotcom/aura/blob/master/aura-components/src/main/components/ui/inputBaseOption/inputBaseOption.intf

Where both attributes are defined as:

  • value Indicates whether the status of the option is selected. Default value is false.
  • text The input value attribute.

The confusion comes from the fact that the DOM uses different attribute names:

  • checked Sets or returns the checked state of a radio button
  • value Sets or returns the value of the value attribute of the radio button

http://www.w3schools.com/jsref/dom_obj_radio.asp

For DOM element, the state is either checked for radio and checkbox inputs, or value for other types of input. The Lightning API might sound confusing, but it's more consistent across all input elements.

0

For a quick workaround , you can modify your code a bit.

Application:

<aura:application >
<aura:attribute name="radiochoice" type="Integer" default="0"/>
<fieldset class="slds-form-element">
  <label class="slds-form-element__label" for="select-01"> </label>
  <div class="slds-form-element__control">
      <label class="slds-radio">
          <ui:inputRadio aura:id="r0" name="options" label="1" value="1" change="{!c.onGroup}" />
          <span class="slds-radio--faux"></span>
      </label>
      <label class="slds-radio">
           <ui:inputRadio aura:id="r1" name="options" label="2" value="2" change="{!c.onGroup}"  />
          <span class="slds-radio--faux"></span>
      </label>
  </div>
</fieldset><br/>
<ui:outputText value="{!v.radiochoice}" title="my output"/></aura:application>

Controller:

({
    doInit : function(cmp, event, helper) {
    },   onGroup: function(cmp, evt) {
    var elem = evt.getSource();
    var selected = elem.get("v.label");     cmp.set("v.radiochoice", selected);   }, })

hope this could fetch you your required value for time being..i will update if i find a better solution.

Thanks

1
  • Can't use labels since that messes with my UI.
    – Jason Lee
    Jun 21 '16 at 17:28

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.