2

I have a simple component that creates a record using lightning-record-edit-form. After the record is created, I want to clear the values of the lightning-input-field components. I have tried a few different ways, and none seem to work. The same code applied to a lightning-input does work.

example template

<template>
    <lightning-card title="bug sample">
        <lightning-record-edit-form id="form" object-api-name="Account" onsubmit={handleSubmit} onsuccess={handleSuccess}>
            <lightning-messages></lightning-messages>
            <lightning-input-field value={name} field-name="Name"></lightning-input-field>
            <lightning-input value={name}></lightning-input>
            <lightning-button type="submit" label="Save" class="slds-m-top_medium">
            </lightning-button>
        </lightning-record-edit-form>
    </lightning-card>
</template>

example .js

import {
    LightningElement,
    track
} from 'lwc';

export default class ToDoApp extends LightningElement {
    @track name;

    handleSubmit(event) {
        event.preventDefault();
        const fields = event.detail.fields;
        this.template.querySelector('lightning-record-edit-form').submit(fields);
    }

    handleSuccess() {
        // attempt 1
        this.name = '';
        // attempt 2
        this.template.querySelectorAll('lightning-input-field').forEach(each => {
            each.value = '';
        });
    }
}

on success, the lightning-input clears, but the lightning-input-field remains unchanged.

Any ideas?

2

This is working as designed. You can modify lightning-input-fields programmatically by changing whatever is specified on their value attribute and it will work...except (here comes the catch)...

Once the user provides any input whatsoever, you cannot programmatically change a lightning-input-field. This is documented in the docs for lightning-input-field:

If a user enters anything in an input field, you can no longer programmatically set the value of the field. The assumption is that there are unsaved changes that should not be overwritten. If you want to be able to overwrite user changes, you can use lightning-input instead.

This special behavior for lightning-input-field conflicts with how properties on all other child components are handled, which makes it very unintuitive. From the LWC docs for Set Properties on Child Components: "The data binding for property values is one-way. If the property value changes in the owner component, the updated value propagates to the child component."

Vote for the idea Remove restriction on programmatically setting lightning-input-fields.

  • Thanks for the clarification. I voted for your idea. This is unfortunate and unintuitive. – Jake Richter Apr 18 at 7:19
1

Have one "not so bad solution". You should wrap all 'lightning-input-field' in <template if:true={renderInputs}></template>

On init your '@track renderInputs = true';

When you need to clear value you will do next:

inputClear() {
    this.renderInputs = false;
    setTimeout(() => {this.renderInputs = true}, 0);
}

This will couse rerender of lightning-input-field. This will not be work without setTimeout(). Or you can use setInterval - any asynch function.

0

I think lightning-record-edit-form is too bound to the record to allow you to modify the fields without modifying the record itself.

In order to get the level of flexibility you're looking for, you may need to to move away from that component & create the record manually using createRecord. This will allow you to manipulate the fields all you like, but it will mean you'll need to handle errors more explicitly.

For greater context, here's an article from the documentation that compares the different components for creating & updating records.

-1

A lightning-record-edit-form component is a wrapper component that accepts a record ID and is used to display one or more fields and labels associated with that record. The lightning-input-field component is used inside the lightning-record-edit-form to create editable fields.

So for clear values on input field, you may clear or delete value of the record-id attribute on lightning-record-edit-form markup

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.