You need to sign in to do that
Don't have an account?
Ruben Halman
TH: Input Data Using Forms: Checkmark
Hi,
I do not understand why, but for some reason my Checkmark Input is not getting retrieved correctly.
It is always FALSE when creating a newItem, even when I put it to true.
I have been stuck on this for a while and hoping for some help!
THE COMPONENT:
<aura:component >
<aura:attribute name="newItem" type="Camping_Item__c" default="{ 'sobjectType': 'Camping_Item__c',
'Name': '',
'Quantity__c': '0',
'Price__c': 0,
'Packed__c':false}"/>
<aura:attribute name="items" type="Camping_Item__c[]"/>
<div class="slds-col slds-col--padded slds-p-top--large">
<div aria-labelledby="newItemform">
<fieldset class="slds-box slds-theme--default slds-container--small">
<legend id="newexpenseform" class="slds-text-heading--small slds-p-vertical--medium">
Add Camping Item
</legend>
<form class="slds-form--stacked">
<div class="slds-form-element slds-is-required">
<div class="slds-form-element__control">
<lightning:input name="expname" label="Camping Item Name"
class="slds-input slds-form-element__label"
value="{!v.newItem.Name}" aura:id="expname"
required="true"/>
</div>
</div>
<div class="slds-form-element slds-is-required">
<div class="slds-form-element__control">
<lightning:input type="number" label="Quantity" maxlength="10" min="1"
name="quantity" class="slds-input slds-form-element__label"
value="{!v.newItem.Quantity__c}" aura:id="quantity"
required="true"/>
</div>
</div>
<div class="slds-form-element">
<div class="slds-form-element__control">
<lightning:input type="number" name="price" label="Price" formatter="currency" step="0.01"
class="slds-input slds-form-element__label"
value="{!v.newItem.Price__c}" aura:id="price"
/>
</div>
</div>
<div class="slds-form-element">
<lightning:input type="checkbox" name="packed" label="Packed"
class="slds-checkbox slds-form-element__label"
aura:id="packed"
value="{!v.newItem.Packed__c}"/>
</div>
<div class="slds-form-element">
<lightning:button label="Create Expense"
class="slds-button slds-button--brand"
onclick="{!c.clickCreateItem}"/>
</div>
</form>
</fieldset>
</div>
</div>
<section class ="slds-card__body">
<div id="list" class = "row">
<aura:iteration items="{!v.items}" var="item">
<c:campingListItem item="{!item}"/>
</aura:iteration>
</div>
</section>
</aura:component>
THE CONTROLLER:
({
clickCreateItem: function(component, event, helper) {
// Simplistic error checking
var validCamp = true;
// get Value from expname input
var textField = component.find("expname");
console.log("--textField--"+textField);
var textValue = textField.get("v.value");
console.log('textValue = '+textValue);
// get Value from quantity input
var quantityField = component.find("quantity");
console.log("--quantityField--"+quantityField);
var quantityValue = quantityField.get("v.value");
console.log('quantityValue = '+quantityValue);
// get Value from price input
var priceField = component.find("price");
console.log("--priceField--"+priceField);
var priceValue = priceField.get("v.value");
console.log('priceValue = '+priceValue);
// get Value from checkMark
var checkmarkField = component.find("packed");
console.log("--checkmarkField--"+checkmarkField);
var checkmarkValue = checkmarkField.get("v.value");
console.log('checkmarkValue = '+checkmarkValue);
// //TEST INPUT
if ($A.util.isEmpty(textValue)){
validCamp = false;
textField.set("v.errors", [{message:"Camping Item name can't be blank."}]);
}
else {
textField.set("v.errors", null);
}
if (validCamp == true && quantityValue < 1){
validCamp = false;
quantityField.set("v.errors", [{message:"Camping Item's quantity should be greater or equal 1."}]);
}
else {
quantityField.set("v.errors", null);
}
priceField.set("v.errors", null);
checkmarkField.set("v.errors", null);
//
// //LOGIC
//
if(validCamp){
//
var itemObj = component.get("v.newItem");
console.log("---itemObj---"+itemObj);
console.log("Create camping item : " + JSON.stringify(itemObj));
var theItems = component.get("v.items");
// Copy the expense to a new object
var newItem = JSON.parse(JSON.stringify(itemObj));
//var newItem = itemObj;
console.log("Expenses before 'create': " + JSON.stringify(theItems));
theItems.push(newItem);
component.set("v.items", theItems);
console.log("Expenses after 'create': " + JSON.stringify(theItems));
var newItemObj = {'sobjectType': 'Camping_Item__c',
'Name': '',
'Quantity__c': 0,
'Price__c': 0 };
//resetting the Values in the form
component.set("v.newItem",newItemObj);
alert('the items value provider has changed');
}
}
})
I do not understand why, but for some reason my Checkmark Input is not getting retrieved correctly.
It is always FALSE when creating a newItem, even when I put it to true.
I have been stuck on this for a while and hoping for some help!
THE COMPONENT:
<aura:component >
<aura:attribute name="newItem" type="Camping_Item__c" default="{ 'sobjectType': 'Camping_Item__c',
'Name': '',
'Quantity__c': '0',
'Price__c': 0,
'Packed__c':false}"/>
<aura:attribute name="items" type="Camping_Item__c[]"/>
<div class="slds-col slds-col--padded slds-p-top--large">
<div aria-labelledby="newItemform">
<fieldset class="slds-box slds-theme--default slds-container--small">
<legend id="newexpenseform" class="slds-text-heading--small slds-p-vertical--medium">
Add Camping Item
</legend>
<form class="slds-form--stacked">
<div class="slds-form-element slds-is-required">
<div class="slds-form-element__control">
<lightning:input name="expname" label="Camping Item Name"
class="slds-input slds-form-element__label"
value="{!v.newItem.Name}" aura:id="expname"
required="true"/>
</div>
</div>
<div class="slds-form-element slds-is-required">
<div class="slds-form-element__control">
<lightning:input type="number" label="Quantity" maxlength="10" min="1"
name="quantity" class="slds-input slds-form-element__label"
value="{!v.newItem.Quantity__c}" aura:id="quantity"
required="true"/>
</div>
</div>
<div class="slds-form-element">
<div class="slds-form-element__control">
<lightning:input type="number" name="price" label="Price" formatter="currency" step="0.01"
class="slds-input slds-form-element__label"
value="{!v.newItem.Price__c}" aura:id="price"
/>
</div>
</div>
<div class="slds-form-element">
<lightning:input type="checkbox" name="packed" label="Packed"
class="slds-checkbox slds-form-element__label"
aura:id="packed"
value="{!v.newItem.Packed__c}"/>
</div>
<div class="slds-form-element">
<lightning:button label="Create Expense"
class="slds-button slds-button--brand"
onclick="{!c.clickCreateItem}"/>
</div>
</form>
</fieldset>
</div>
</div>
<section class ="slds-card__body">
<div id="list" class = "row">
<aura:iteration items="{!v.items}" var="item">
<c:campingListItem item="{!item}"/>
</aura:iteration>
</div>
</section>
</aura:component>
THE CONTROLLER:
({
clickCreateItem: function(component, event, helper) {
// Simplistic error checking
var validCamp = true;
// get Value from expname input
var textField = component.find("expname");
console.log("--textField--"+textField);
var textValue = textField.get("v.value");
console.log('textValue = '+textValue);
// get Value from quantity input
var quantityField = component.find("quantity");
console.log("--quantityField--"+quantityField);
var quantityValue = quantityField.get("v.value");
console.log('quantityValue = '+quantityValue);
// get Value from price input
var priceField = component.find("price");
console.log("--priceField--"+priceField);
var priceValue = priceField.get("v.value");
console.log('priceValue = '+priceValue);
// get Value from checkMark
var checkmarkField = component.find("packed");
console.log("--checkmarkField--"+checkmarkField);
var checkmarkValue = checkmarkField.get("v.value");
console.log('checkmarkValue = '+checkmarkValue);
// //TEST INPUT
if ($A.util.isEmpty(textValue)){
validCamp = false;
textField.set("v.errors", [{message:"Camping Item name can't be blank."}]);
}
else {
textField.set("v.errors", null);
}
if (validCamp == true && quantityValue < 1){
validCamp = false;
quantityField.set("v.errors", [{message:"Camping Item's quantity should be greater or equal 1."}]);
}
else {
quantityField.set("v.errors", null);
}
priceField.set("v.errors", null);
checkmarkField.set("v.errors", null);
//
// //LOGIC
//
if(validCamp){
//
var itemObj = component.get("v.newItem");
console.log("---itemObj---"+itemObj);
console.log("Create camping item : " + JSON.stringify(itemObj));
var theItems = component.get("v.items");
// Copy the expense to a new object
var newItem = JSON.parse(JSON.stringify(itemObj));
//var newItem = itemObj;
console.log("Expenses before 'create': " + JSON.stringify(theItems));
theItems.push(newItem);
component.set("v.items", theItems);
console.log("Expenses after 'create': " + JSON.stringify(theItems));
var newItemObj = {'sobjectType': 'Camping_Item__c',
'Name': '',
'Quantity__c': 0,
'Price__c': 0 };
//resetting the Values in the form
component.set("v.newItem",newItemObj);
alert('the items value provider has changed');
}
}
})
components/c/campingList.js:32 --checkmarkField--SecureComponentRef: markup://lightning:input {77:0} {packed}{ key: {"namespace":"c"} }
components/c/campingList.js:34 checkmarkValue = false
components/c/campingList.js:61 ---itemObj---[object Object]
components/c/campingList.js:62 Create camping item : {"sobjectType":"Camping_Item__c","Name":"test","Quantity__c":"1","Price__c":"01","Packed__c":false}
components/c/campingList.js:69 Expenses before 'create': []
components/c/campingList.js:72 Expenses after 'create': [{"sobjectType":"Camping_Item__c","Name":"test","Quantity__c":"1","Price__c":"01","Packed__c":false}]