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-->
  • Tried to use force:inputField but i get the exact same error ... – g.romain--guidani Sep 20 '17 at 14:35
  • same using lightning:input and same using input alone ... getting confused =s – g.romain--guidani Sep 20 '17 at 14:47
0

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>
  • I don't think you need the min and step attributes so feel free to ignore them. – Diana Widjaja Myerscough Sep 29 '17 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’/>

New contributor
yash shukla is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.