0

I have a parent component that references a child component within a for:each template. When a user clicks an add button, another row of the lightning record form gets added. I want one submit button at the bottom of the parent component and be able to submit every row. The current code works but only for the first row of the lightning record form and does not save the other rows.

HTML of parent component

<template>
<br></br>
<div class="slds-grid slds-gutters">
    <div class="slds-col">
        <h3 style="padding-left: 10px;">Your Feedback is Vital </h3>
        <h3 style="padding-left: 10px;">Help us to improve the overall shopper experience by collaborating on</h3>
    </div>
    <div class="slds-col">
    <lightning-button variant="brand" label={clickedButtonLabel} title="Start" onclick={handleClick} class="slds-m-right_x-small"></lightning-button>  
    </div>
</div>


<br></br>
<template if:true={boolVisible}>
    <template if:true={feedbackWrappers}>
        <template for:each={feedbackWrappers} for:item="feedbackwrp" for:index="index">
    <c-ssp-Feedback-Child-Comp key={feedbackwrp.Id} index={index} feedbackwrp ={feedbackwrp}>
    </c-ssp-Feedback-Child-Comp>
    </template>
</template>

<template for:each={feedbackWrappersAdd} for:item="feedbackwrpadd" for:index="index">
<c-ssp-Feedback-Add-Comp key={feedbackwrpadd.Id}  index={index} feedbackwrpadd ={feedbackwrpadd} data-id='mainEdit'>
</c-ssp-Feedback-Add-Comp>
</template>

<div class="slds-grid slds-gutters">
<div class="slds-col">
<div class="slds-grid">
    <div style="margin-top: 15px" class="slds-col slds-size_1-of-12">
        <lightning-button-icon icon-name="utility:add" size="large" onclick={incrementCount} ></lightning-button-icon>

    </div>
    <div class="slds-col slds-size_3-of-12 slds-col_bump-right"></div>
    <div class="slds-col slds-size_1-of-12">
        <!-- <lightning-button class="slds-m-top_small slds-float_right" type="submit" label="Save">
    </lightning-button> -->
    </div>
    <div class="slds-col slds-size_1-of-12">
        <lightning-button class="slds-m-top_small slds-float_right"  variant="brand" type="submit" label="Submit" onclick={submitClick}> 
        </lightning-button>
    </div>
</div>
</div>
</div>

JS of parent component

export default class SspFeedbackComp extends LightningElement {

@track feedbackWrappers = [];
@wire(getFeedbackList, { accList: "$accList" })
displayFeedbacks({ error, data }) {
    if (data) {
        console.log("Data: " + JSON.stringify(data));
        this.feedbackWrappers = data;
    } else if (error) {
        console.log("feedbackWrappers error --> " + JSON.stringify(error));
        this.error = error;
    }
}

@track clickedButtonLabel = 'Start';  
@track boolVisible = true;
@track accountId
submitClick(){
    this.template.querySelector("c-ssp-Feedback-Add-Comp").submitClick();
    this.template.querySelector("c-ssp-Feedback-Add-Comp").handleSubmit();
}

handleSuccess(event) {
    console.log('onsuccess event recordEditForm',event.detail.id)
        const events = new ShowToastEvent({
            title: 'Validation Request Feedback Saved',
            message: 'Your validation request feedback has been successfully saved',
             variant: 'success',
             mode: 'dismissable'
        });
        this.dispatchEvent(events);
}
handleSubmit(event) {

    console.log('onsubmit event recordEditForm'+ event.detail.fields);

}

handleError(event) {
    console.log('onsubmit event recordEditForm'+ event.detail.fields);
    const errorEvent = new ShowToastEvent({
        title: 'Error Creating Validation Request Feedback',
        message: 'An error occured creating your Validation Request Feedback. Please try again',
         variant: 'error',
         mode: 'dismissable'
    });
    this.dispatchEvent(errorEvent);
}


        handleClick(event) {  
            const label = event.target.label;  

            if ( label === 'Start' ) {  

                this.clickedButtonLabel = 'Hide';  
                this.boolVisible = true;  

            } else if  ( label === 'Hide' ) {  

                this.clickedButtonLabel = 'Start';  
                this.boolVisible = false; 

            }  
        }  

        @track url
        url = window.location.href.split("/")[5];

        @track error;
        @track accList ;
        @track validationId;
        @wire(getVRId, {accId: '$url'})
        wiredAccounts({
            error,
            data
        }) {
            if (data) {
                this.accList = JSON.stringify(data);
                this.accList = this.accList.match(/([^"]+)/g)[11];

            } else if (error) {
                this.error = error;
            }
        }
        @track feedbackWrappersAdd = []     

        incrementCount(event){
            if(! this.count) {
                 this.count = 0;
                }
            this.count = this.count + 1;
            this.feedbackWrappersAdd.push(this.count);
            console.log("This is the current value");
            console.log(this.count);
            console.log(this.feedbackWrappersAdd);
        }

}

HTML of child component

<template>
<br></br>
<div class="slds-box" style="background-color: white;">
    <div class="slds-grid slds-gutters">
    <div class="slds-col">
<!-- 
        <select style="width:500px; height: 400;">
            <template for:each={picklistValues.data.values} for:item="item">
                <option key={item.value} onchange={handleChange}>{item.label}</option>
            </template>
        </select> -->
<!-- 
            <lightning-card title="LdsCreateRecord" icon-name="standard:record">
               <div class="slds-m-around_medium">
                   <lightning-input label="Id"  value={feedbackId}></lightning-input>
                   <lightning-input label="Name" onchange={handleNameChange} class="slds-m-bottom_x-small"></lightning-input>
                   <lightning-button label="Create Account" variant="brand" onclick={createFeedback}></lightning-button>
               </div>
            </lightning-card> -->
            <lightning-record-edit-form object-api-name="SSP_Validation_Feedback__c" onsuccess={handleSuccess} onsubmit ={handleSubmit} onerror ={handleError}>
                <lightning-messages>
                </lightning-messages>
                <!-- <lightning-input-field field-name='Validation_Request__c' value={accList}></lightning-input-field> -->
                <lightning-input-field field-name='Validation_Request__c' value={accList} disabled class="slds-hide"></lightning-input-field>
                <div class="slds-grid">
                    <div class="slds-col slds-size_4-of-12">
                        <label for="FeedbackType">What should we do?</label>
                        <lightning-input-field field-name='Feedback_Type__c' variant="label-hidden" onchange={handleOnChange}></lightning-input-field>
                    </div>

                    <template if:true={isSelectSwap}>
                    <div class="slds-col slds-size_4-of-12">
                        <label for="AddProduct">What should we remove?</label>
                        <lightning-input-field field-name='Add_Product__c' variant="label-hidden"></lightning-input-field>
                    </div>
                    <div class="slds-col slds-size_4-of-12">
                        <label for="RemoveProduct">What should we add?</label>
                        <lightning-input-field field-name='Remove_Product__c' variant="label-hidden"></lightning-input-field>
                    </div>
                    </template>
        </div>
    </div>
</div>

JS of child component

export default class SspFeedbackAddComp extends LightningElement {
@api index
@api feedbackwrpadd

@track url
url = window.location.href.split("/")[5];

@track error;
@track accList ;
@track validationId;
@wire(getVRId, {accId: '$url'})
wiredAccounts({
    error,
    data
}) {
    if (data) {
        this.accList = JSON.stringify(data);
        this.accList = this.accList.match(/([^"]+)/g)[11];

    } else if (error) {
        this.error = error;
    }
}         

@api submitClick(){
    console.log("THIS IS THE VR RECORD");
    console.log(this.accList);
    this.template.querySelector('lightning-record-edit-form').submit();
    updateValidationRecord({
        vrId:this.accList
    })
    .then(() => {
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Success',
                message: 'Your Feedback has been submitted',
                variant: 'sucess',
            }),
        );
    })
    .catch(error => {
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Error on data save',
                message: error.message.body,
                variant: 'error',
            }),
        );
    });
}

handleSuccess(event) {
    console.log('onsuccess event recordEditForm',event.detail.id)
        const events = new ShowToastEvent({
            title: 'Validation Request Feedback Saved',
            message: 'Your validation request feedback has been successfully saved',
             variant: 'success',
             mode: 'dismissable'
        });
        this.dispatchEvent(events);
}
handleSubmit(event) {

    console.log('onsubmit event recordEditForm'+ event.detail.fields);

}

handleError(event) {
    console.log('onsubmit event recordEditForm'+ event.detail.fields);
    const errorEvent = new ShowToastEvent({
        title: 'Error Creating Validation Request Feedback',
        message: 'An error occured creating your Validation Request Feedback. Please try again',
         variant: 'error',
         mode: 'dismissable'
    });
    this.dispatchEvent(errorEvent);
}

handleSuccess(event) {
    console.log('onsuccess event recordEditForm',event.detail.id)
        const events = new ShowToastEvent({
            title: 'Validation Request Feedback Saved',
            message: 'Plase save any other feedbacks you may have changed',
             variant: 'success',
             mode: 'dismissable'
        });
        this.dispatchEvent(events);
    }

}

Improve this question

1 Answer 1

Reset to default
2

Modify your function to use querySelectorAll

submitClick()
   {
    var allchildcmp=this.template.querySelectorAll("c-ssp-Feedback-Add-Comp");
    allchildcmp.forEach(function(element){
        element.submitClick();
    },this);
   }
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .