inputRadio value not returning correctly?

Question

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..

Answer 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>

Answer 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.

Answer 3

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