function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Brian Findlay 14Brian Findlay 14 

Trailhead complaining about Packed checkbox missing. Connect Components with Events in Lightning Components Basics module

Challenge Not yet complete... here's what's wrong: 
The campingList component doesn't appear to have a Packed checkbox field in the form using a Lightning Base component.

Continue to receive this error on the Trailhead even though the packed checkbox field is there.  Here are the two relevant Lightning components.  Obviously, Trailhead is looking for a certain parameter or attribute that is missing but is not specified what exactly it is looking for.  Any help would be appreciated.
  
Camping List
<aura:component >
    <aura:handler name="addItemEvent" event="c:addItemEvent"
                  action="{!c.handleAddItem}"/>
    <aura:attribute name="items" type="Camping_Item__c[]"/>
    <aura:attribute name="newItem" type="Camping_Item__c"
                    default="{'sobjectType' : 'Camping_Item__c',
                               'Quantity__c' : 0,
                               'Price__c' : 0}"/>
    <!-- BOXED AREA -->
    <fieldset class="slds-box slds-theme--default slds-container--small">

        <legend id="newCampItemForm" class="slds-text-heading--small
      slds-p-vertical--medium">
            Add Camping Item
        </legend>

        <!-- CREATE NEW CAMPING ITEM FORM -->
        <form class="slds-form--stacked">

            <div class="slds-form-element slds-is-required">
                <div class="slds-form-element__control">
                    <lightning:input type="text" aura:id="itemform" label="Camping Item Name"
                                  value="{!v.newItem.Name}"
                                  required="true"/>
                </div>
            </div>

            <div class="slds-form-element slds-is-required">
                <div class="slds-form-element__control">
                    <lightning:input type="number" aura:id="itemform" label="Quantity"
                                     name="itemform"
                                     min="1"
                                     step="1"
                                     value="{!v.newItem.Quantity__c}"
                                     placeholder="0"/>

                </div>
            </div>

            <div class="slds-form-element">
                <div class="slds-form-element__control">
                    <lightning:input type="number" aura:id="itemform" label="Price"
                                      value="{!v.newItem.Price__c}"/>
                </div>
            </div>

            <div class="slds-form-element">
                <lightning:input type="checkbox" aura:id="itemform" label="Packed?"
                                  value="{!v.newItem.Packed__c}"/>
            </div>

            <div class="slds-form-element">
                <lightning:button label="Create Camping Item"
                           class="slds-button slds-button--brand"
                           onclick="{!c.clickCreateItem}"/>
            </div>

        </form>
        <!-- / CREATE NEW CAMPING ITEM FORM -->

    </fieldset>
    <!--<div class ="slds-card slds-p-top&#45;&#45;meduim">-->
        <!--<header class ="slds-card__header">-->
            <!--<h3 class = "slds-text-heading&#45;&#45;small">Items</h3>-->
        <!--</header>-->

        <!--<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>-->
    <!--</div>-->
    <!-- i do not think this html is needed any longer -->
    <c:campingListForm />
</aura:component>
  
Camping List Form
<aura:component >

    <aura:attribute name="newItem" type="Camping_Item__c"
                    default="{ 'sobjectType': 'Camping_Item__c',
                    'Name': '',
                    'Packed__c': false,
                    'Price__c': '0',
                    'Quantity__c': '0' }"/>
    <aura:registerEvent name="addItem" type="c:addItemEvent"/>

    <div>
        <form class="slds-form--stacked">

            <div class="slds-form-element slds-is-required">
                <div class="slds-form-element__control">
                    <lightning:input type="text" aura:id="itemform" label="Camping Item Name"
                                     value="{!v.newItem.Name}"
                                     required="true"/>
                </div>
            </div>

            <div class="slds-form-element slds-is-required">
                <div class="slds-form-element__control">
                    <lightning:input type="number" aura:id="itemform" label="Quantity"
                                     name="itemform"
                                     min="1"
                                     step="1"
                                     value="{!v.newItem.Quantity__c}"
                                     placeholder="0"/>

                </div>
            </div>

            <div class="slds-form-element">
                <div class="slds-form-element__control">
                    <lightning:input type="number" aura:id="itemform" label="Price"
                                     value="{!v.newItem.Price__c}"/>
                </div>
            </div>

            <div class="slds-form-element">
                <lightning:input type="checkbox" aura:id="itemform" label="Packed?"
                                 value="{!v.newItem.Packed__c}"/>
            </div>

            <div class="slds-form-element">
                <lightning:button label="Create Camping Item"
                                  onclick="{!c.clickCreateItem}"/>
            </div>

        </form>
    </div>

</aura:component>

 
Best Answer chosen by Brian Findlay 14
Brian Findlay 14Brian Findlay 14
Figured out the solution.  The validator is looking for an extremely specific format for the lightning components.

Using the following as a guide for that format:  
<aura:component controller="ExpensesController">
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>

<aura:attribute name="expenses" type="Expense__c[]"/>

<aura:attribute name="newExpense" type="Expense__c"
     default="{ 'sobjectType': 'Expense__c',
                    'Name': '',
                    'Amount__c': 0,
                    'Client__c': '',
                    'Date__c': '',
                    'Reimbursed__c': false }"/>
    <!-- PAGE HEADER -->
    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="standard:scan_card" alternativeText="My Expenses"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">Expenses</h1>
                <h2 class="slds-text-heading--medium">My Expenses</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
    <!-- / PAGE HEADER -->

    <!-- NEW EXPENSE FORM -->
    <lightning:layout>
        <lightning:layoutItem padding="around-small" size="6">

       <!-- CREATE NEW EXPENSE -->
<div aria-labelledby="newexpenseform">

    <!-- BOXED AREA -->
    <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>

    <!-- CREATE NEW EXPENSE FORM -->
    <form class="slds-form--stacked">          
        <lightning:input aura:id="expenseform" label="Expense Name"
                         name="expensename"
                         value="{!v.newExpense.Name}"
                         required="true"/> 
        <lightning:input type="number" aura:id="expenseform" label="Amount"
                         name="expenseamount"
                         min="0.1"
                         formatter="currency"
                         step="0.01"
                         value="{!v.newExpense.Amount__c}"
                         messageWhenRangeUnderflow="Enter an amount that's at least $0.10."/>
        <lightning:input aura:id="expenseform" label="Client"
                         name="expenseclient"
                         value="{!v.newExpense.Client__c}"
                         placeholder="ABC Co."/>
        <lightning:input type="date" aura:id="expenseform" label="Expense Date"
                         name="expensedate"
                         value="{!v.newExpense.Date__c}"/>
        <lightning:input type="checkbox" aura:id="expenseform" label="Reimbursed?"  
                         name="expreimbursed"
                         checked="{!v.newExpense.Reimbursed__c}"/>
        <lightning:button label="Create Expense" 
                          class="slds-m-top--medium"
                          variant="brand"
                          onclick="{!c.clickCreate}"/>
    </form>
    <!-- / CREATE NEW EXPENSE FORM -->

  </fieldset>
  <!-- / BOXED AREA -->

</div>
<!-- / CREATE NEW EXPENSE -->

        </lightning:layoutItem>
    </lightning:layout>
    <!-- / NEW EXPENSE FORM -->
<c:expensesList expenses="{!v.expenses}"/>

</aura:component>

You can use something like the following to pass: 
<aura:component >
    <aura:registerEvent name="addItem" type="c:addItemEvent"/>

    <aura:attribute name="newItem" type="Camping_Item__c"
                    default="{ 'sobjectType': 'Camping_Item__c',
                    'Name': '',
                    'Quantity__c': 0,
                    'Price__c': 0,
                    'Packed__c': false }"/>
    <!-- CREATE NEW ITEM FORM -->
    <form class="slds-form--stacked">

        <div class="slds-form-element slds-is-required">
            <div class="slds-form-element__control">
                <lightning:input type="text" aura:id="itemname" label="Name"
                              class="slds-input"
                              value="{!v.newItem.Name}"
                              required="true"/>

            </div>
        </div>

        <div class="slds-form-element slds-is-required">
            <div class="slds-form-element__control">
                <lightning:input type="number" aura:id="quantity" label="Quantity"
                                 class="slds-input"
                                 value="{!v.newItem.Quantity__c}"
                                 required="true"
                                 step="1"
                                 min="1"
                />

            </div>
        </div>

        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <lightning:input type="number" aura:id="campinglistform" label="Price"
                         name="price"
                         min="0.1"
                         formatter="currency"
                         step="0.01"
                                 value="{!v.newItem.Price__c}"/>
            </div>
        </div>

        <div class="slds-form-element">
        	<lightning:input type="checkbox" aura:id="campinglistform" label="Packed?"  
                         name="packed"
                         checked="{!v.newItem.Packed__c}"/>
        </div>

        <div class="slds-form-element">
            <lightning:button label="Create Camping Item" 
                          class="slds-m-top--medium"
                          variant="brand"
                          onclick="{!c.clickCreateItem}"/>
        </div>

    </form>
    <!-- / CREATE NEW ITEM FORM -->
</aura:component>

 

All Answers

Brian Findlay 14Brian Findlay 14
Figured out the solution.  The validator is looking for an extremely specific format for the lightning components.

Using the following as a guide for that format:  
<aura:component controller="ExpensesController">
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>

<aura:attribute name="expenses" type="Expense__c[]"/>

<aura:attribute name="newExpense" type="Expense__c"
     default="{ 'sobjectType': 'Expense__c',
                    'Name': '',
                    'Amount__c': 0,
                    'Client__c': '',
                    'Date__c': '',
                    'Reimbursed__c': false }"/>
    <!-- PAGE HEADER -->
    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="standard:scan_card" alternativeText="My Expenses"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">Expenses</h1>
                <h2 class="slds-text-heading--medium">My Expenses</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
    <!-- / PAGE HEADER -->

    <!-- NEW EXPENSE FORM -->
    <lightning:layout>
        <lightning:layoutItem padding="around-small" size="6">

       <!-- CREATE NEW EXPENSE -->
<div aria-labelledby="newexpenseform">

    <!-- BOXED AREA -->
    <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>

    <!-- CREATE NEW EXPENSE FORM -->
    <form class="slds-form--stacked">          
        <lightning:input aura:id="expenseform" label="Expense Name"
                         name="expensename"
                         value="{!v.newExpense.Name}"
                         required="true"/> 
        <lightning:input type="number" aura:id="expenseform" label="Amount"
                         name="expenseamount"
                         min="0.1"
                         formatter="currency"
                         step="0.01"
                         value="{!v.newExpense.Amount__c}"
                         messageWhenRangeUnderflow="Enter an amount that's at least $0.10."/>
        <lightning:input aura:id="expenseform" label="Client"
                         name="expenseclient"
                         value="{!v.newExpense.Client__c}"
                         placeholder="ABC Co."/>
        <lightning:input type="date" aura:id="expenseform" label="Expense Date"
                         name="expensedate"
                         value="{!v.newExpense.Date__c}"/>
        <lightning:input type="checkbox" aura:id="expenseform" label="Reimbursed?"  
                         name="expreimbursed"
                         checked="{!v.newExpense.Reimbursed__c}"/>
        <lightning:button label="Create Expense" 
                          class="slds-m-top--medium"
                          variant="brand"
                          onclick="{!c.clickCreate}"/>
    </form>
    <!-- / CREATE NEW EXPENSE FORM -->

  </fieldset>
  <!-- / BOXED AREA -->

</div>
<!-- / CREATE NEW EXPENSE -->

        </lightning:layoutItem>
    </lightning:layout>
    <!-- / NEW EXPENSE FORM -->
<c:expensesList expenses="{!v.expenses}"/>

</aura:component>

You can use something like the following to pass: 
<aura:component >
    <aura:registerEvent name="addItem" type="c:addItemEvent"/>

    <aura:attribute name="newItem" type="Camping_Item__c"
                    default="{ 'sobjectType': 'Camping_Item__c',
                    'Name': '',
                    'Quantity__c': 0,
                    'Price__c': 0,
                    'Packed__c': false }"/>
    <!-- CREATE NEW ITEM FORM -->
    <form class="slds-form--stacked">

        <div class="slds-form-element slds-is-required">
            <div class="slds-form-element__control">
                <lightning:input type="text" aura:id="itemname" label="Name"
                              class="slds-input"
                              value="{!v.newItem.Name}"
                              required="true"/>

            </div>
        </div>

        <div class="slds-form-element slds-is-required">
            <div class="slds-form-element__control">
                <lightning:input type="number" aura:id="quantity" label="Quantity"
                                 class="slds-input"
                                 value="{!v.newItem.Quantity__c}"
                                 required="true"
                                 step="1"
                                 min="1"
                />

            </div>
        </div>

        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <lightning:input type="number" aura:id="campinglistform" label="Price"
                         name="price"
                         min="0.1"
                         formatter="currency"
                         step="0.01"
                                 value="{!v.newItem.Price__c}"/>
            </div>
        </div>

        <div class="slds-form-element">
        	<lightning:input type="checkbox" aura:id="campinglistform" label="Packed?"  
                         name="packed"
                         checked="{!v.newItem.Packed__c}"/>
        </div>

        <div class="slds-form-element">
            <lightning:button label="Create Camping Item" 
                          class="slds-m-top--medium"
                          variant="brand"
                          onclick="{!c.clickCreateItem}"/>
        </div>

    </form>
    <!-- / CREATE NEW ITEM FORM -->
</aura:component>

 
This was selected as the best answer
Veronica RebenkoVeronica Rebenko
Thank you! Your solution works perfectly.
Rajiv MishraRajiv Mishra
but what is that exact format in packed checkbox for which validator is looking for???
Pierre Felber 5Pierre Felber 5
the problem is 
<lightning:input type="checkbox" aura:id="itemform" label="Packed?"
                                  value="{!v.newItem.Packed__c}"/>
it should be 
<lightning:input type="checkbox" aura:id="itemform" label="Packed?"
                                  checked="{!v.newItem.Packed__c}"/>
note that if using the toggle or checkbox type to not use the value attribute but the checked attribute