1

Problem - I am not able to reset the lightning-input to its default value.

What I want - I am providing the default value to lightning-input through my javascript file. I change the values of lightning-input on UI but then if I want my form back in the state as it was before, so I click "Reset" button which causes a javascript method to execute in which I reset my input fields using reset() method, but it doesn't work [ It does not set my lightning-input to their default values i.e. "Initial" and "0"].

Code -

In .html

<template>
    <form>
        <lightning-input type="text" 
                         name="input1" 
                         label="Enter some text" 
                         value={textValue} 
                         onchange={changeTextValue}>
        </lightning-input>
        <lightning-input type="number" 
                         name="input2" 
                         label="Enter some number" 
                         value={numValue}
                         onchange={changeNumValue}>
        </lightning-input>
        <lightning-button label="Reset" onclick={handleReset}></lightning-button>
    </form>
</template>

In .js

import { LightningElement, track } from 'lwc';

export default class Test extends LightningElement {
    @track textValue = "Initial";
    @track numValue = 0;

    changeTextValue(event) {
        this.textValue = event.target.value;
    }

    changeNumValue(event) {
        this.numValue = event.target.value;
    }

    handleReset() {
        const inputFields = this.template.querySelectorAll(
            'lightning-input'
        );
        if (inputFields) {
            inputFields.forEach(field => {
                field.reset();
            });
        }
    }
}
  • It does not work means the values in lightning input does not clear to null - but it would not since the changes done by handlereset is not directly changing the binded variable to push changes to dom. Use following please this.template.querySelectorAll('lightning-input').forEach(each => { each.value = ''; }); That should work. – Mitesh Jan 26 at 12:47
  • Have a look here [developer.salesforce.com/docs/component-library/tools/… – Mitesh Jan 26 at 12:54
3

With a form, you can clear all values with:

handleReest() {
    this.template.querySelector('form').reset();
}

This will invoke the standard "HTML Form Reset" function. Note that the values won't go to the "default", just blank values. If you want to reset back to the initial values, you'd have to write the code again:

handleReset() {
    this.textValue = 'Initial';
    this.numValue = 0;
}
| improve this answer | |
  • 1
    Thanks, you are correct but I also want to know that the "reset" function sets the default value for "lightning-input-field" used in "lightning-record-edit-form" but why not for "lightning-input". – Avi Rai Jan 26 at 14:37

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.