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

Question

I am using below record-edit-form to create record - After button click i am getting rec object as null {}. How to pass the values from inputfields to apex.

The lightning-button is in footer of a modal and the input-field is in body of a modal.

  <lightning-record-edit-form object-api-name="Test__c"
                                    onsuccess={handleTestCreated}>


    <lightning-input-field field-name="Status__c" value={status}></lightning-input-field>

    </lightning-record-edit-form>

<lightning-button variant="brand" label="Save" onclick={handleClick}>
                            </lightning-button>

js - I am creating a object as there are many fields

        **import createTest from '@salesforce/apex/TestController.createTest';
        @track status;
        @track rec = {
                status : this.status
            }

handleClick() {
        createTest({ acc : this.rec })
            .then(result => {
                this.message = result;
                this.error = undefined;
                if(this.message !== undefined) {
                    this.dispatchEvent(
                        new ShowToastEvent({
                            title: 'Success',
                            message: 'Account created',
                            variant: 'success',
                        }),
                    );
                }

                console.log(JSON.stringify(result));
                console.log("result", this.message);
            })
            .catch(error => {
                this.message = undefined;
                this.error = error;
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error creating record',
                        message: error.body.message,
                        variant: 'error',
                    }),
                );
                console.log("error", JSON.stringify(this.error));
            });
    }**

apex -

public static Test__c createTest(Test__c acc) {
        system.debug('acc'+acc);
        insert acc;
        return acc;
    }

Answer 1

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.