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.

  • 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 '16 at 17:57
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);
    }
});
  • 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 '16 at 4:34
  • @KiranMachhewar you have to add the checked property to the radio button.I have updated the answer. – Praveen Sep 20 '16 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 '17 at 1:06

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.