0

html:

<template>
    <lightning-card>
        <lightning-button-icon icon-name="utility:add"  size="large" variant="bare" alternative-text="Add"  onclick={addRow}> </lightning-button-icon>          
        <lightning-record-edit-form  record-id={recId} object-api-name={objectName} 
        onsuccess={handleSuccess} onsubmit={validateFields} onerror={handleError}>
            <lightning-messages data-id="message">
            </lightning-messages>
            <div class="slds-grid slds-wrap">
                <template if:true={fields}>
                    <template for:each={fields} for:item="f" for:index="index">                    
                        <div key={f.Id} class="slds-col slds-size_1-of-6">
                            <lightning-input-field field-name={f.APIName}>
                            </lightning-input-field>
                        </div>
                    </template>
                </template>  
            </div>
            <lightning-button-icon icon-name="utility:delete"
                                   data-id={indx}       
                                   alternative-text="Delete"     
                                   class="slds-m-left_xx-small"
                                   onclick={removeRow} 
                                   title="Delete"></lightning-button-icon>     
            <lightning-button type="submit" variant="brand" label="Save" onclick={saveClick}></lightning-button>
        </lightning-record-edit-form>
    </lightning-card>
</template>

js:

connectedCallback() {     
    getForm({ recordId: this.recId,objectName:this.objectName, fieldSetName:this.fieldSet})
        .then(result => {
            console.log('Data:'+ JSON.stringify(result));
            if (result) {
                this.fields = result.Fields;
                this.error = undefined;
            }
        }) .catch(error => {
            console.log(error);
            this.error = error;
        }); 
    }

    saveClick(e) {
        const inputFields = e.detail.fields;
        this.template.querySelector('lightning-record-edit-form').submit(inputFields);
    }

    validateFields() {
        return [...this.template.querySelectorAll("lightning-input-field")].reduce((validSoFar, field) => {
            return (validSoFar && field.reportValidity());
        }, true);
    }

    handleSuccess(e) {
        this.showMessage('Record Saved Successfully','success');
    }

    handleError(e) {
        this.template.querySelector('[data-id="message"]').setError(e.detail.detail);
        e.preventDefault();
    }

    showMessage(message,variant) {
        const event = new ShowToastEvent({
            title: 'Record Save',
            variant: variant,
            mode: 'dismissable',
            message: message
        });
        this.dispatchEvent(event);
    }

    addRow() {
        this.FIELDList.push(this.fields);
    }  
}
1
  • Are you wanting a button that adds a new row somewhere on the UI when you click it? Jan 13 at 23:39