[SalesForce] Get values from Record-edit-form onload LWC

I have this below lightning-record-edit-form. I want to get the value from Name lightning-input-field so that i can do some manipulation at javascript end.

Currenlty i am getting null on load of the form.

How to get the value.

HTML

<lightning-record-edit-form record-id={recordId} object-api-name="Test__c" onload={handleOnLoad}>
<lightning-input-field variant="label-stacked" class="name" field-name="Name"></lightning-input-field>
</lightning-record-edit-form>

JS –

  handleOnLoad() {
        let name= this.template.querySelector('.name');
        alert(name);
    }

Best Answer

handleOnLoad() {
    let name = this.template.querySelector('.name').value;
    alert(name);
}

This will work.

BUT above approach is not good. You can get all the values based on recordId as below

handleOnLoad(event) {
    var record = event.detail.records;
    var fields = record[this.recordId].fields; // record['0010K000026Y******'].fields;
    const accName = fields.Name.value;      
    alert(accName);
    //const myfieldVal = fields.myfield__c.value;
    //alert(myfieldVal);
}

Related Solutions

[SalesForce] How to Pass values from Record-Edit-Form to Apex method LWC

Either your code sample is incomplete, or you are not actually doing anything when your form submission succeeds.

you declared an onsuccess event named handleTestCreated however, it is not in your controller.

normally, you should be able to access the fields submitted when the form successfully submits as pointed out in the documentation

Ex:

handleSucess(event){
   const updatedRecord = event.detail.id;
   console.log('onsuccess: ', updatedRecord);
}

as you can see, in the documented sample, the submitted record id is captured and logged in the console.

Note that, when you are using this component, you dont need to create the object manually in an apex controller, the component uses the User Interface API to do this for you.

There is equally a documented sample that prevents the form submission to manually do the operation.

[SalesForce] Building an efficient LWC form without record-edit-form

Since lightning-input-field now has a required attribute, I decided to use lightning-record-edit-form. I'm using both lightning-input-field and lightning-input because some of the form fields reside in different objects. I use an onsubmit handler to do the validation that I needed.

Best Answer

Related Solutions

[SalesForce] How to Pass values from Record-Edit-Form to Apex method LWC

[SalesForce] Building an efficient LWC form without record-edit-form

Related Topic