0

After finishing the basic lightning component trail I started writing another component of my own choice and when I hit the submit button I get the below error if I cut out the pickList field and radio button everything works as expected

Now I am not getting any error but the options selected from the pickList field and radio button are not storing in the Org

I have got the pickList field and radio button from slds website.

component:

  <aura:component controller="surveyApexController">
    <aura:attribute name="surveys" type="General_Survey__c[]" />
    <aura:attribute name="newSurvey" type="General_Survey__c" 
                    default="{'sobjectType':  'General_Survey__c',
                             'Name': '',
                             'Age__c': 0,
                             'Occupation__c': '',
                             'Favorite_place__c': ''
                             }" />

    <lightning:layout>
        <lightning:layoutItem padding="around-small" size="12">
            <div arialabelledby="newSurveyForm">
                <!--Boxed area-->
                <fieldSet class="slds-box slds-theme-default slds-container--large">
                    <!-- writing name on the border layout -->
                    <legend id="boxyarea" class="slds-text-heading--large
                                                 slds-p-vertical--large">
                        Survey Form
                    </legend>
                    <form class="slds-form-stacked">
                        <div class="slds-grid slds-wrap">
                            <div class="slds-medium-size_1-of-4 slds-p-right_large" >
                                <lightning:input aura:id="expenseform" label="Expense Name"
                                                 name="expensename"
                                                 value="{!v.newSurvey.Name}"
                                                 placeholder="Please enter your name here"
                                                 required="true"/>
                            </div>
                            <div class="slds-medium-size_1-of-6 slds-p-right_large">
                                <lightning:input type="number" aura:id="expenseform" label="Age"
                                                 name="expenseage"
                                                 min="18"

                                                 value="{!v.newSurvey.Age__c}"
                                                 messageWhenRangeUnderflow="Age must be 18 or above"/>    
                            </div>
                            <div class="slds-medium-size_1-of-5 ">
                                <div class="slds-form-element__control">
                                    <lightning:select aura:id="expenseform" name="select1" label="Occupation">
                                        <option value="{! v.newSurvey.Favorite_place__c }">Other</option>
                                        <option value="{! v.newSurvey.Favorite_place__c }">Engineer</option>
                                    </lightning:select>
                                </div>
                            </div>
                        </div>
                        <legend class="slds-form-element__legend slds-form-element__label 
                                       slds-text-heading--small slds-p-top_large">
                            Q. This is the first question
                        </legend>
                        <div class="slds-form-element__control">
                            <span class="slds-radio">
                                <lightning:input aura:id="expenseform" type="radio" label="This is the first option" name="options" 
                                                 value="{! v.newSurvey.Favorite_place__c }" />
                                <lightning:input aura:id="expenseform" type="radio" label="This is the 2nd option" name="options" 
                                                 value="{! v.newSurvey.Favorite_place__c }" />
                            </span>

                        </div>       
                        <lightning:button label="Create Expense" 
                                          class="slds-m-top--medium"
                                          variant="brand"
                                          onclick="{!c.clickCreate}"/>    
                    </form>
                </fieldSet>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

controller:

({
    clickCreate: function(component, event, helper) {
        //expenseform is th id field of all the input fields 
        var validExpense = component.find('expenseform').reduce(function (validSoFar, inputCmp) {
            // Displays error messages for invalid fields
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && inputCmp.get('v.validity').valid;
        }, true);
        // If we pass error checking, do some real work
        if(validExpense){
            // Create the new expense
            // new expense is the attribute name containing the default values 
            var newSurvey = component.get("v.newSurvey");
            console.log("Create expense: " + JSON.stringify(newSurvey));
            helper.createExpense(component, newSurvey);
        }
    },
})

helper:

({
    //here expense is the parameter that we passing in saveExpense function in Apex class
    createExpense: function(component, gSurvey) {
        //saveExpense is a name of the function that we are passing 
        var action = component.get("c.saveSurvey");
        //here again expense is the name of the method parameter
        action.setParams({
            "gSurvey": gSurvey
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                //expenses is the attribute name with the type of array object
                var surveys = component.get("v.surveys");
                surveys.push(response.getReturnValue());
                component.set("v.surveys", surveys);
            }
        });
        $A.enqueueAction(action);
    }
})
0

In order to use showHelpMessageIfInvalid method, use components from lightning namespace instead of plain html elements.

<lightning:select ... /> for picklist and <lightning:input type="radio" ... /> for radio button.

So it will be something like this for your picklist:

<lightning:select aura:id="expenseform" name="select1" label="Occupation" value="{! v.newSurvey.Occupation__c }">
    <option value="Other">Other</option>
    <option value="Engineer">Engineer</option>
</lightning:select>

and this is how to work with radio buttons:

// component:    
<lightning:input type="radio" value="Canada" label="Canada"
                 onchange="{! c.placeChanged }" name="place" aura:id="place" />
<lightning:input type="radio" value="Russia" label="Russia"
                 onchange="{! c.placeChanged }" name="place" aura:id="place" />


// controller:
placeChanged: function(component, event, helper) {
    let radioValue = event.getSource().get('v.value');
    let isChecked = event.getSource().get('v.checked')
    component.set("v.newSurvey.Favorite_place__c", radioValue);
    console.log(':::new value = ' + radioValue);
}
  • Hello edelrabe, Thank you so much for your response, now I am not getting any error but the options that I select for both picklist field and radio buttons are not storing in my salesforce org, I have updated the code in the description could you please correct me one more time Thank you again – gs650x Jul 9 '18 at 12:45
  • I've updated the code for select list. What is the Survey__c field which you're trying to update with a radio button? – edelrabe Jul 9 '18 at 15:05
  • Survey__c is nothing with the help radio button I want to update Favorite_place__c field on General_Survey__c object – gs650x Jul 9 '18 at 16:31
  • @gs650x, I've added exampled for radio button – edelrabe Jul 10 '18 at 8:15
  • Thank you so much for your response but I tried console.log("radio value"+ radioValue +" "+ "checked? " + isChecked); I am getting isCheked true but nothing in the radio and the same thing is happening again not able to update the required filed, could you please look at it again? – gs650x Jul 10 '18 at 19:20

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.