How do I refactor components and communicate with events?
I'm facing an issue with this Trailhead module - I'm getting the following error message & I really can't see why:
Challenge Not yet complete... Here's what's wrong: The campingListFormHelper isn't resetting the 'newItem' value provider with a Camping_Item__c sObject.
Functionality, my app works exactly as specified - I think there must be some nuisance in whatever way Trailhead checks the functionality that I'm not aware of.
Here's my app:
({controller (no helper code for this component):
doInit : function (component, event, helper) {
var action = component.get("c.getItems");
action.setCallback(this, function(response) {
var state = response.getState();
if (component.isValid() && state == 'SUCCESS') {
component.set("v.items", response.getReturnValue());
} else {
console.log('Failed with state: ' + state);
}
});
$A.enqueueAction(action);
},
handleAddItem: function(component, event, helper) {
var item = event.getParam("item");
var action = component.get("c.saveItem");
//json stringify is not needed I think.
action.setParams({
"item": item
});
action.setCallback(this, function(response){
var state = response.getState();
if (component.isValid() && state === "SUCCESS") {
var items = component.get("v.items");
items.push(item);
component.set("v.items",items);
}
});
$A.enqueueAction(action);
}
})
campingListForm component:default="{'sobjectType':'Camping_Item__c',
'Name':'',
'Quantity__c':0,
'Price__c':0,
'Packed__c':false}" />controller:
({
submitForm : function(component, event, helper) {
var newItem = component.get("v.newItem");
var nameField = component.find("itmname");
var quantityField = component.find("itmquantity");
var priceField = component.find("itmprice");
if ($A.util.isEmpty(nameField.get("v.value"))) {
nameField.set("v.errors", [{message:"Item name can't be blank."}]);
} else if ($A.util.isEmpty(quantityField.get("v.value"))) {
quantityField.set("v.errors", [{message:"Item quantity can't be blank."}]);
} else if ($A.util.isEmpty(priceField.get("v.value"))) {
priceField.set("v.errors", [{message:"Item price can't be blank."}]);
} else {
helper.createItem(component, newItem);
nameField.set("v.errors", null);
quantityField.set("v.errors", null);
priceField.set("v.errors", null);
}
}
})
helper:
({
createItem : function(component, newItem) {
// fire event
var addItem = component.getEvent("addItem");
addItem.setParams({"item":newItem});
addItem.fire();
var newItemStr = "{"sobjectType":"Camping_Item__c","Name":"","Price__c":0,"Quantity__c":0,"Packed__c":false}";
component.set("v.newItem", JSON.parse(newItemStr));
}
})
As I said, the application works perfectly and I can't see any reason why it would be failing but it is. I've checked the other answers for similar problems to no avail.
To refactor components and communicate with events: component.set("v.newItem", "
{'sobjectType':'Camping_Item__c','Name':'',Quantity__c': 0,'Price__c': 0}");<br>