13

I have an Aura attribute as follows:

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

I am providing an input form to user & then saving the values entered in an Array My requirement is that when the value goes to the array,the attribute should be reset to "resets the newItem value provider with a blank sObjectType of Camping_Item__c.", from the controller.

Any help would be highly needful.

My code is as follows:

CampingList Component:

<aura:component >

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

<aura:attribute name="items" type="Camping_Item__c[]"/>

<ol>
<li>Bug Spray</li>
<li>Bear Repellant</li>
<li>Goat Food</li>
</ol>

<!-- 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="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:inputNumber aura:id="quantity" label="Quantity"
              class="slds-input"
              labelClass="slds-form-element__label"
              value="{!v.newItem.Quantity__c}"
              required="true"/>

      </div>
  </div>

  <div class="slds-form-element">
      <div class="slds-form-element__control">
          <ui:inputCurrency aura:id="price" label="Price"
              class="slds-input"
              labelClass="slds-form-element__label"
              value="{!v.newItem.Price__c}"
              />
      </div>
  </div>

  <div class="slds-form-element">
      <ui:inputCheckbox aura:id="packed" label="Packed?"
          class="slds-checkbox"
          labelClass="slds-form-element__label"
          value="{!v.newItem.Packed__c}"/>
  </div>

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

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



<div class="slds-card slds-p-top--medium">
    <header class="slds-card__header">
        <h3 class="slds-text-heading--small">Items</h3>
    </header>

    <section class="slds-card__body">
        <div id="list" class="row">
            <aura:iteration items="{!v.items}" var="items">
                <c:campingListItem item="{!item}"/>
            </aura:iteration>
        </div>
    </section>
</div>

Controller code:

({
clickCreateItem: function(component, event, helper) {

    // Simplistic error checking
    var validItem = true;

    // Name must not be blank
    var nameField = component.find("itemname");
    var itemname = nameField.get("v.value");
    if ($A.util.isEmpty(itemname)){
        validItem = false;
        nameField.set("v.errors", [{message:"Item name can't be blank."}]);
    }
    else {
        nameField.set("v.errors", null);
    }

    // Quantity must not be blank
    var quantityField = component.find("quantity");
    var quantity = nameField.get("v.value");
    if ($A.util.isEmpty(quantity)){
        validItem = false;
        quantityField.set("v.errors", [{message:"Quantity can't be blank."}]);
    }
    else {
        quantityField.set("v.errors", null);
    }

    var priceField = component.find("price");
    var price = priceField.get("v.value");
    if ($A.util.isEmpty(price)){
        validItem = false;
        priceField.set("v.errors", [{message:"Price can't be blank."}]);
    }
    else {
        quantityField.set("v.errors", null);
    }


    if(validItem){
        var newItem = component.get("v.newItem");
        console.log("Create item: " + JSON.stringify(newItem));
        //helper.createItem(component, newItem);
        //        var theItems = component.get("v.items");

    // Copy the expense to a new object
    // THIS IS A DISGUSTING, TEMPORARY HACK
    var newItem = JSON.parse(JSON.stringify(item));

    console.log("Items before 'create': " + JSON.stringify(theItems));
    theExpenses.push(newItem);
    component.set("v.expenses", theItems);
    console.log("Items after 'create': " + JSON.stringify(theItems));
    theItems.push(newItem);
    component.set("v.items", theItems);

    }
}

})

Requirement:

21

Add the following piece of code at the bottom of your controller:

        component.set("v.newItem",{'sobjectType':'Camping_Item__c',
                'Name': '',
                'Quantity__c': 0,
                'Price__c': 0,
                'Packed__c': false});
3
  • 8
    Although this is a valid solution, I think it leaves something to be desired (not to take anything away from @shobhit, of course). Seeing as the attribute already has a "default" value in the component, it would be very nice if the rest of the controller (or helper) didn't need to also know the details. Something like this would be ideal: component.set("v.newItem", default); Jan 8 '17 at 21:37
  • @ToddHalfpenny So it's been a year... Have you maybe worked out that "default" problem? Is it possible to use the value already created in *.cmp? Jan 10 '18 at 14:00
  • I'm afraid I haven't, though I also haven't done much Lightning recently. Jan 11 '18 at 15:29

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