[SalesForce] How to reset attribute value to null in Lightning Component

I'm trying to reset an attribute value to null. But when I execute reset button call, the value in the textbox is cleared BUT it does not get cleared from display.

Here is a sample code.

TestCmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global">

    <aura:attribute name="num" type="Integer" default="" />

    <div class="slds-card slds-p-around_small">

        <div class="slds-grid slds-gutters">
            <div class="slds-col slds-size_1-of-1">
                <lightning:input aura:id="numDays" type="number" value="{!v.num}" min="0" placeholder="days..." label="Number value" />
            </div>
        </div>
        <div class="slds-grid slds-gutters slds-grid_align-center slds-p-top_medium">
            <div class="slds-col">
                <lightning:button label="Reset (null)" onclick="{!c.reset1}" variant="brand" />
            </div>
            <div class="slds-col">
                <lightning:button label="Reset ('')" onclick="{!c.reset2}" variant="brand" />
            </div>
            <div class="slds-col">
                <lightning:button label="Reset (0)" onclick="{!c.reset3}" variant="brand" />
            </div>
        </div>

    </div>

</aura:component>

TestCmpController.js

({
    reset1 : function(component, event, helper) {
        component.set("v.num", null);
    },
    reset2 : function(component, event, helper) {
        component.set("v.num", "");
    },
    reset3 : function(component, event, helper) {
        component.set("v.num", "0");
    }
})

If you try the code above. You will notice that the <lightning:input> has a placeholder text. This is a requirement for my project.

There I've added 3 Reset buttons, each execute to empty the attribute value. Now, to support placeholder text, I need to clear the value itself, and if I simply reset it to 0, then placeholder text won't show up.

Strangely enough, after clicking Reset (null) or Reset ('') buttons, the display of component still shows the number value. But if we simply click inside the input textbox then it shows placeholder text and clear the displaying value.

Doesn't it look like a bug in lightning:input? Is there any workaround for me to try on?

Best Answer

lightning:input is still in beta. You can use this component but its unstable, so the below code gives an error if there is an lightning:input component in the component markup.

$A.get('e.force:refreshView').fire();

Use ui:inputText component, so declare this component like below:

<ui:inputText aura:id="numDays" value="{!v.num}" placeholder="days..."/>

And using the below code, the value inside the component gets cleared and you will be able to see the placeholder

component.set("v.num", "");

Related Solutions

[SalesForce] get values in lightning:input with $A.createComponents

In order to bind to something dynamically, you need a reference. Here is a very basic, no-frills, slightly buggy implementation that demonstrates that this basically works.

Notice how I use component.getReference to dynamically link to a field. Also notice how I can bind to the same field twice, which literally lets me modify the same field more than once in real-time, just to prove that they are real references.

With a little more error checking and fact-gathering, this could indeed be a dynamic form with some basic describe data, etc. Notice how I do not use aura:id at all. I simply bound all the fields to a common object, and I could get and retrieve the values at will (in this case, demonstrated through Object.keys). I could also bind this object to, say, a force:recordData to dynamically save the data back to the server, or send it through a server action in Apex.

<aura:application extends="force:slds">
    <aura:attribute name="accountRecord" type="Account" default="{ 'sobjectType': 'Account' }" />
    <aura:attribute name="edits" type="Aura.Component[]" />
    <aura:attribute name="fieldName" type="String" />
    <aura:attribute name="output" type="String" />

    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    {!v.output}

    <hr />

    {!v.edits}

    <ui:inputText value="{!v.fieldName}" />
    <ui:button press="{!c.addField}" label="Add" />
    <br/>
    <ui:button press="{!c.display}" label="Show Data" />
</aura:application>

({
    init: function(component, event, helper) {
        component.set("v.edits", []);
    },
    addField: function(component, event, helper) {
        var field = component.get("v.fieldName"), 
            obj = component.get("v.accountRecord");
        obj[field] = "";
        component.set("v.accountRecord", obj);
        $A.createComponent(
            "lightning:input", {
                value: component.getReference("v.accountRecord."+component.get("v.fieldName")),
                label: component.get("v.fieldName"),
                type: "Text"
            },
            $A.getCallback(function(newCmp, status, error) {
                var edits = component.get("v.edits");
                edits.push(newCmp);
                component.set("v.edits", edits);
            })
        );
    },
    display: function(component, event, helper) {
        var obj = component.get("v.accountRecord");
        var results = [];
        Object.keys(obj).forEach(function(key) { results.push(key+":"+obj[key])});
        component.set("v.output", results.join('\n'));
    }
})

Here's a demo of me dynamically binding stuff:

[SalesForce] Custom html label in lightning:button

following your example, I uploaded a static resource, referencing it with lightning:require, for ex.

    <aura:component implements="forceCommunity:availableForAllPageTypes" access="global" >
        <ltng:require  styles="{!join(',',$Resource.awesomefonts + '/font-awesome-4.7.0/css/font-awesome.css', $Resource.awesomefonts + '/font-awesome-4.7.0/font/fontawesome-webfont.svg',)}" afterScriptsLoaded="{!c.doInit}" />

            <lightning:button aura:id="cssClass" onclick="{!c.doSomething}">
                <aura:set attribute="label" value="Back"/>
        </lightning:button>
    </aura:component>

and I added a class using $A.util.addClass as follows:

({
    doInit : function(cmp, event, helper) {
        var cmpTarget = cmp.find('cssClass');
        $A.util.addClass(cmpTarget, 'fa fa-arrow-circle-left');
    }
})

and Tada!

Best Answer

Related Solutions

[SalesForce] get values in lightning:input with $A.createComponents

[SalesForce] Custom html label in lightning:button

Related Topic