0

I have a data entry form using lighting-input and lightning-combobox. When the user submits the form, I want to clear all fields so the user can make a new entry.

I'm using querySelectorAll and looping through each input and combobox element to set value to blank. The input fields are cleared successfully, but the combobox fields are not cleared and the entries from the previous submission are still there.

How do I clear the combobox fields? I've tried various combinations of each.value and each.setValue() but nothing works.

Here's the relevant html:

<template>
    <template if:false={isComplete}>
        <div class="slds-grid slds-wrap">
            <div class="slds-col slds-size_1-of-3">
                <lightning-input data-formfield="firstName" label="First Name" required></lightning-input>
            </div>
            <div class="slds-col slds-size_1-of-3">
                <lightning-input data-formfield="lastName" label="Last Name" required></lightning-input>
            </div>
            <div class="slds-col slds-size_1-of-3">
                <lightning-input data-formfield="zip" label="Zip Code" class="spec-req"></lightning-input>
            </div>
            <div class="slds-col slds-size_1-of-3">
                <lightning-input data-formfield="mobile" label="Mobile" type="phone" class="spec-req"></lightning-input>
            </div>
            <div class="slds-col slds-size_1-of-3">
                <lightning-input data-formfield="email" label="Email" type="email" class="spec-req"></lightning-input>
            </div>
            <div class="slds-col slds-size_1-of-3">
                <lightning-input data-formfield="orgAffiliation" label="Org Affiliation"></lightning-input>
            </div>
            <div class="slds-col slds-size_1-of-3">
                <lightning-input data-formfield="youth" label="Number of Youth" type="number"></lightning-input>
            </div>
            <template if:true={veteranStatusOptions.data}>
                <div class="slds-col slds-size_1-of-3">
                    <lightning-combobox data-formfield="veteranStatus" label="Veteran Status" value={veteranStatus} options={veteranStatusOptions.data.values} onchange={handleStatusChange} placeholder="-select-" required></lightning-combobox>
                </div>
            </template>
            <div class="slds-col slds-size_1-of-3">
                <lightning-combobox data-formfield="waiver" label="Agree to Waive" value={waiver} options={yesnoOptions} onchange={handleWaiverChange} placeholder="-select-" required></lightning-combobox>
            </div>
        </div>
    </template>

</template>

Here's the relevant JS:

// Clear variables and form for the next entry.
handleContinueEntry() {
    this.template.querySelectorAll('lightning-input').forEach(each => {
        each.value = '';
    });
    this.template.querySelectorAll('lightning-combobox').forEach(each => {
        each.value = null;
    });
}

Here's the screenshot after clearing the fields:

eb

1
  • The only way I've been able to accomplish that is by having an option with the value of ''. I haven't come across a way that resets it to the default 'blank' value. – Antonio Manente Oct 12 '19 at 5:52
2

As I can see from your code, You Combobox are binded to two JS variables

{veteranStatus} and {waiver}

You have to make them as Null as well

this.veteranStatus = null;
this.waiver = null;
1
  • Of course! How foolish of me to have missed all the variable bindings. – David Cheng Oct 14 '19 at 15:53
2

You can directly set the value attribute of the combobox, there is no function in JS like setValue().

this.template.querySelectorAll('lightning-combobox').forEach(each => {
    each.value = undefined;
});

Even setting null or '' does work to.

See the live example here.

2
  • I tried each.value = undefined, each.value = null, and each.value = ''. None of them work. – David Cheng Oct 13 '19 at 23:44
  • @DavidCheng I have updated my asnwer please check this work completely fine here. There might be some other reason for this to fail in your case. If you are facing any error please update that in question – Rahul Gawale Oct 14 '19 at 7:42

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.