0

I am having some trouble completing the Entering data using forms challenge on trailhead.

My code is working as i want it to but i'm getting an error and i don't know if it is a "trailhead problem" or if i did something wrong ( for real =) )

The error i am getting is

The campingList component appears to be using UI Components instead of Base Lightning Components in the form. You should be using only Base Lightning Components.

Sounds easy ! i just have to change all my ui:input[...] in my form and use a lightning:input[...] elements instead.

So i checked the doc on how to use lightning:input, but i cannot ùanage to make it work. So here is my question- How can i replace those ui:input into lightning:input ?

I tried many ways but im always unable to save. (btw sorry for the bad english, im doing my best ) Thank you to help me =) Have a great day !

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

    <div class="slds-form-element slds-is-required">
        <div class="slds-form-element__control">
            <ui:inputText aura:id="itemname" label="Item Name"
                          class="slds-input"
                          labelClass="slds-form-element__label"
                          value="{!v.newItem.Name}"
                          required="true"/>
        </div>
    </div>
    <div class="slds-form-element slds-is-required">
        <div class="slds-form-element__control">
            <ui:inputCheckbox aura:id="packed" label="Packed ?"
                          class="slds-checkbox"
                          labelClass="slds-form-element__label"
                          value="{!v.newItem.Packed__c}"/>
        </div>
    </div>
    <div class="slds-form-element slds-is-required">
        <div class="slds-form-element__control">
            <ui:inputCurrency aura:id="itemprice" label="Item Price"
                          class="slds-input"
                          labelClass="slds-form-element__label"
                          value="{!v.newItem.Price__c}"
                          required="true"/>
        </div>
    </div>
    <div class="slds-form-element slds-is-required">
        <div class="slds-form-element__control">
            <ui:inputNumber aura:id="itemquantity" label="Item Quantity"
                          class="slds-input"
                          labelClass="slds-form-element__label"
                          value="{!v.newItem.Quantity__c}"
                          required="true"/>
        </div>
    </div>
    <div class="slds-form-element">
      <ui:button label="Create Item"
          class="slds-button slds-button--brand"
          press="{!c.clickCreateItem}"/>
    </div>
</form>
<!--/CREATE NEW ITEM FORM-->
2
  • Tried to use force:inputField but i get the exact same error ... Sep 20, 2017 at 14:35
  • same using lightning:input and same using input alone ... getting confused =s Sep 20, 2017 at 14:47

2 Answers 2

1

The switch to lightning:input is actually pretty straightforward. Include the type attribute and remove labelClass since lightning:input already comes with Lightning Design Sytem styling. You also don't need the div containers for each field.

<form class="slds-form--stacked">
      <lightning:input aura:id="itemform" 
                       label="Name"
                       name="itemname"
                       value="{!v.newItem.Name}"
                       required="true"/>

      <lightning:input type="number" 
                       aura:id="itemform" 
                       label="Quantity"
                       name="quantity"
                       value="{!v.newItem.Quantity__c}"
                       min="1"
                       required="true"/>

      <lightning:input type="number" 
                       aura:id="itemform" 
                       label="Price"
                       name="price"
                       value="{!v.newItem.Price__c}"
                       formatter="currency"
                       step="0.01"/>

      <lightning:input type="checkbox" 
                       aura:id="itemform" 
                       label="Packed?"
                       name="packed"
                       checked="{!v.newItem.Packed__c}"/>

      <lightning:button label="Create Camping Item"
                        variant="brand"
                        onclick="{!c.clickCreateItem}"/>
</form>
1
  • I don't think you need the min and step attributes so feel free to ignore them. Sep 29, 2017 at 21:37
0

Converting ‘ui’ tag to lightning:input is pretty easy For reference have a look at the developer component library. But for an instance you just need to have type attribute specified for the result type you are looking for.

Eg <lightning:input type=‘text’ label=‘test’/>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .