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);
}
})
Best Answer
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:
and this is how to work with radio buttons: