1

In below code I am trying to bind input value with one of the sobject property but currently it is not getting binded. What I need to do so that sobject property will be binded with the html input element. I know I can use ui components but with that LDS is not working as expected so I choose to go with input where styles are working very fine but 

<aura:if isTrue="{!v.question.Type__c == 'Radio'}">        
        <fieldset class="slds-form-element">
            <legend class="slds-form-element__legend slds-form-element__label">{!v.question.Description__c}</legend>
            <div class="slds-form-element__control">
              <aura:iteration items="{!v.question.Answers__r}" var="answer" >  
              <label class="slds-radio" for="{!answer.Id}">
                <input type="radio" value="{!answer.Is_Correct__c}"  onchange="{!c.markAnswer}"
                       data-id="{!answer.Id}" name="options" id="{!answer.Id}" />                  
                <span class="slds-radio--faux"></span>
                <span class="slds-form-element__label">{!answer.Description__c}</span>
              </label>
              </aura:iteration>
            </div>
       </fieldset>
    </aura:if>

Please suggest how to bind input variables with sobject fields in lightning framework.

Improve this question
1
  • Some things to check - what does your attribute definition look like? How are you assigning the return value from the Apex controller? Are you sure the return value contains the correct data? Is the binding working one way (ie writing out data)? Does anything happen when you hit the radio button? Oh and have you used the Chrome or Safarai debuggers to examine what's happening?
    – Caspar Harmer
    Sep 19, 2016 at 17:57

1 Answer 1

Reset to default
2

If you are using Winter'17 org, then you could use the <lightning:input type="radio"/> component which aligns the LDS styled component in Lightning Experience.Here's the doc for it.

But if the org you are working on is Summer'16, then you have to manually set the Is_Correct__c.

you need to do something like this:

Component:

<aura:iteration items="{!v.question.Answers__r}" var="answer" indexVar="index">  
    <label class="slds-radio" for="{!answer.Id}">
        <input type="radio" checked="{!answer.Is_Correct__c}" onchange="{!c.markAnswer}"
               data-id="{!answer.Id}" name="options" id="{!answer.Id}" data-ansIndex="{!index"}/>                  
        <span class="slds-radio--faux"></span>
        <span class="slds-form-element__label">{!answer.Description__c}</span>
    </label>
</aura:iteration>

controller.js

({ 
    markAnswer : function(cmp, event, helper) { 
        var question = cmp.get("v.question");
        var answers = question.Answers__r
        var selectedAnsIdx = event.currentTarget.getAttribute('data-ansIndex');

        for(var i = 0;i < answers.length;i++){
            if(i != selectedAnsIdx){
                answers[i].Is_Correct__c = false;
            }
        }

        answers[selectedAnsIdx].Is_Correct__c = true;
        cmp.set("v.question",question);
    }
});
Improve this answer
3
  • Thanks for replying and for the code. It looks like even after binding is done when tried to render options with radio button selected it is not working. I think I need to go with lightning based components which is going to be future for lightning framework.
    – Kiran Machhewar
    Sep 20, 2016 at 4:34
  • @KiranMachhewar you have to add the checked property to the radio button.I have updated the answer.
    – Praveen
    Sep 20, 2016 at 4:55
  • Just wanted to note that lightning:input is not a panacea - it requires to enter label and does not support certain attributes like inputmode='numeric'.
    – dzh
    Jan 31, 2017 at 1:06

You must log in to answer this question.

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