0

I have created 4 lighting-record-edit forms on a custom object. On the click of a button, I want to check each one of the fields. I need to check if field A is populated that either field B or C is populated. In addition, there is a percentage field on the lightning-record-edit form that I need to make sure the total of all 4 records is not more than 100%

Here is what one of the 4 lighting-record-edit-form's look like They all have the same exact info except I only have a onSubmit on the first one.

    <!-- Incented Employee #1 Primary-->
    <lightning-layout-item padding="around-small">
        <lightning-record-edit-form object-api-name="Incented_Employees__c" data-id="IeForm" onsubmit={handleSubmit} onsuccess={handleIeSuccess}>
            <div class="slds-grid slds-gutters">
                <div class="slds-size_6-of-12">
                    <lightning-input-field lwc:ref="employee1" field-name="Employee__c" required={ie1IsAccountManager}></lightning-input-field>
                </div>
                <div class="slds-size_3-of-12">
                    <lightning-input-field lwc:ref="type1" field-name="Type__c"></lightning-input-field>
                </div>
                <div class="slds-size_3-of-12">
                        <lightning-input-field field-name="Member_Lock_In__c"></lightning-input-field>
                </div>
                <div class="slds-size_4-of-12">
                        <lightning-input-field lwc:ref="percentage1" field-name="Member_Credit_Percentage__c"></lightning-input-field>
                </div>
            </div>               
        </lightning-record-edit-form>
    </lightning-layout-item>
    </lightning-layout>

Here is my starting point at looping each record edit form, I am struggling to determine how I loop each field in each edit form and do the checks. Thank you!!

this.template.querySelectorAll('lightning-record-edit-form[data-id="IeForm"]')
  .forEach((form) => {
    console.log('here is the form ' + form);
  });
Improve this question

1 Answer 1

Reset to default
0

If no iterator wraps your form, the best is to use lwc:ref as the most Salesforce-like way to refer to fields. And you've already started out:

lwc:ref="employee1"
...
lwc:ref="type1"

The fields in the first record-edit form should have a "1" suffix, the fields in the second a "2" etc. This gets us started.

this.refs is not an array, but that doesn't stop us working with its properties as if they were:

Object.keys(this.refs).filter(e => e.startsWith('employee'))
    .forEach(e => console.log(e));

... will output all the keys starting with "employee".

To check field values in B and C depending on A, we can:

// a check function for single record-edit form:
const check = (i) => (
    !this.refs['employee'+i].value 
    || this.refs['type'+i].value || this.refs['member'+i].value);
// check done for 4 record-edit forms
const checkAll = check(1) && check(2) && check(3) && check(4);

To sum up percentages:

const sum = Object.keys(this.refs)
    // only consider percentage fields
    .filter(e => e.startsWith('percentage'))
    // only consider fields with a value (not null, undefined, or empty string)
    .filter(e => this.refs[e].value)
    // sum the values
    .reduce((prev, cur) => prev + parseFloat(this.refs[cur].value), 0);
if(sum > 100) ...

I would do some rounding here, but I leave this to you.

Finally, to answer the question from the comments,

Can I add an lwc:ref to the lightning-record-edit-form, loop through the fields in that form and add them to a list?

lwc:ref can be attached to any element (outside of a lwc iterator), including lightning-record-edit-form. However, any lwc:ref returns Javascript objects of type HTMLElement - just like what the items in the list represent that are returned by querySelectorAll(). Child elements can be accessed by means of standard DOM means, e.g.

this.refs.form2.querySelectorAll('lightning-input-field')[3].value

But the lightning-input-field won't exhibit "lwc:ref" as an attribute. The following attempts are dead ends:

// returns 0
this.refs.form2.querySelectorAll('lightning-input-field[lwc\\:ref]').length;
// returns undefined
this.refs.form2.refs;

So the answer to the question will be: Yes, this is possible, but inside of the form you'd need to work with standard DOM access, which is in my view less readable and maintainable than the use of lwc:ref.

(It is often pointed out that lwc:ref comes with a significant speed advantage. But because lwc:ref can't be used inside of iterators, there aren't many cases where this matters.)

Improve this answer
5
  • Thank you. One question.. when I run the first snipet and do .forEach(e => console.log(e)); , the values in the console are 'employee1 employee2 employee3 employee4 instead of the values that are in the field.. how di I get the values Commented Nov 14, 2024 at 14:54
  • Are you referring to my first code example with the console.out()? For the value replace e by this.refs[e].value . Commented Nov 14, 2024 at 14:58
  • yes. thank you! I appreciate it!!! Commented Nov 14, 2024 at 15:26
  • Sorry, one more follow up question. Can I add an lwc:ref to the lightngin-record-edit-form, loop through the fields in that form and add them to a list? thanks again!! Commented Nov 14, 2024 at 20:31
  • Okay, Frank, I've added the answer to this question to the text of my answer :-) Commented Nov 15, 2024 at 10:22

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.