You need to sign in to do that
Don't have an account?
Samuel_Naylor
"expense field can't be blank"
Hello!
I am working on this TrailHead Exercise : LINK (Scroll to the sub-title "The Reference Is Not the Collection"). When I attempt to run the application, after this step, I receive the below screen-shot. Basically, it seems like the application and it's components are not accepting the data that I'm submitting. Could it have to do with the location of the 'aura:attribute' which is bold & italicised in the expenses.cmp code section. For reference edits, below the screen shot of my current code.
expenses.app
<aura:application extends="force:slds"> <!-- This component is the real "app" --> <c:expenses /> </aura:application>expenses.cmp
<aura:component > <aura:attribute name="expenses" type="Expense__c[]"/> <div class="slds-page-header" role="banner"> <div class="slds-grid"> <div class="slds-col"> <p class="slds-text-heading--label">Expenses</p> <h1 class="slds-text-heading--medium">My Expenses</h1> </div> </div> </div> <div class="slds-col slds-col--padded slds-p-top--large"> <div aria-labelledby="newexpenseform"> <fieldset class="slds-box slds-theme--default slds-container--small"> <legend id="newexpenseform" class="slds-text-heading--small slds-p-vertical--medium">Add Expense</legend> <form class="slds-form--stacked"> <div class="slds-form-element slds-is-required"> <div class="slds-form-element__control"> <ui:inputText aura:id="expname" label="Expense Name" class="slds-input" labelClass="slds-form-element__label" value="{!v.newExpense.Name}" required="true"/> </div> </div> <div class="slds-form-element slds-is-required"> <div class="slds-form-element__control"> <ui:inputNumber aura:id="amount" label="Amount" class="slds-input" labelClass="slds-form-element__label" value="{!v.newExpense.Amount__c}" required="true"/> </div> </div> <div class="slds-form-element"> <div class="slds-form-element__control"> <ui:inputText aura:id="client" label="Client" class="slds-input" labelClass="slds-form-element__label" value="{!v.newExpense.Client__c}" placeholder="ABC Co."/> </div> </div> <div class="slds-form-element"> <div class="slds-form-element__control"> <ui:inputDate aura:id="expdate" label="Expense Date" class="slds-input" labelClass="slds-form-element__label" value="{!v.newExpense.Date__c}" displayDatePicker="true"/> </div> </div> <div class="slds-form-element"> <ui:inputCheckbox aura:id="reimbursed" label="Reimbursed?" class="slds-checkbox" labelClass="slds-form-element__label" value="{v.newExpense.Reimbursed__c}"/> </div> <div class="slds-form-element"> <ui:button label="Create Expense" class="slds-button slds-button--brand" press="{!c.clickCreateExpense}"/> </div> </form> </fieldset> </div> </div> </aura:component>expensesController.js
({ clickCreateExpense: function(component, event, helper) { var validExpense = true; var nameField = component.find("expname"); var expname = nameField.get("v.value"); if ($A.util.isEmpty(expname)){ validExpense = false; nameField.set("v.errors", [{message:"Expense name can't be blank."}]); } else { nameField.set("v.errors", null); } if(validExpense){ // Create the new expense var newExpense = component.get("v.newExpense"); console.log("Create expense: " + JSON.stringify(newExpense)); helper.createExpense(component, newExpense); } } })expensesHelper.js
({ createExpense : function(component, expense) { var theExpenses = component.get("v.expenses"); var newExpense = JSON.parse(JSON.stringify(expense)); console.log("Expenses before 'create': " + JSON.stringify(theExpenses)); theExpenses.push(newExpense); component.set("v.expenses", theExpenses); console.log("Expenses after 'create': " + JSON.stringify(theExpenses)); } })
Samuel_Naylor
RESOLVED.