Conditionally Enable/Disable Input Field in LWC

Question

I'm trying to disable the input field on a row based on the input of another field in the same row. If the 'Property' input is populated, disable the 'Client', and if 'Client' is populated, disable 'Property'. These elements are part of a template that can change the number of rows that exist in the DOM.

I've tried to use the onchange event in each element to set the other to disabled in javascript, but accessing the row, the element, and then it's counter element to disable has proved troublesome.

Below is a code snippet of the first part of the html. Any help is appreciated.

<template>
    <lightning-card title="Project Management">
        <template for:each={userInput} for:item="item">
            <div key={item} class="slds-grid slds-gutters slds-p-around_small slds-border_top">
                <!-- RPM_Note__c -->

                <!-- Notes_Category__c -->
                <div class="slds-col slds-size_1-of-8">
                    <label>Category</label>
                    <lightning-combobox options={categoryOptions.data} value={item.category} data-category={item.id} variant="label-hidden"></lightning-combobox>
                </div>
                
                <div class="slds-col slds-size_1-of-8">
                    <lightning-record-edit-form object-api-name="Note__c">
                        <label>Property</label>
                        <lightning-input-field field-name="Property_Legal_Entity__c" value={item.propertyId} data-property={item.id} variant="label-hidden"></lightning-input-field>
                    </lightning-record-edit-form>
                </div>

                <div class="slds-col slds-size_1-of-8">
                    <lightning-record-edit-form object-api-name="Note__c">
                        <label>Client</label>
                        <lightning-input-field field-name="Client__c" value={item.client} data-client={item.id} variant="label-hidden"></lightning-input-field>
                    </lightning-record-edit-form>
                </div>

Answer 1

one option, I could see is, create two input field for Property. One is disabled by default other one is allowed for input. based on the client value you can choose to display any one input field example:

<div class="slds-col slds-size_1-of-8">
   <lightning-record-edit-form object-api-name="Note__c">
       <label>Property</label>
<template lwc:if{propertyEnabled}>
        <lightning-input-field field-name="Property_Legal_Entity__c" value={item.propertyId} data-property={item.id} variant="label-hidden"></lightning-input-field>
</template>
<template lwc:else>
<lightning-input-field field-name="Property_Legal_Entity__c" value={item.propertyId} data-property={item.id} variant="label-hidden" disabled></lightning-input-field>
</template>
                    </lightning-record-edit-form>
                </div>

            <div class="slds-col slds-size_1-of-8">
                <lightning-record-edit-form object-api-name="Note__c">
                    <label>Client</label>
                    <lightning-input-field field-name="Client__c" value={item.client} data-client={item.id} variant="label-hidden" onchange={disableProperty}></lightning-input-field>
                </lightning-record-edit-form>
            </div>

IN Js propertyEnabled = true; disableProperty(){ this.propertyEnabled = false; }

You can do the same for client as well.

Answer 2

I'm unsure of best practices, but here is how I solved it. I added a name attribute to both inputs (I could not figure out how to identify the input location from the target without adding 'name'), a disable attribute, and an onChange method handleDisableBools().

<!-- Property_Legal_Entity__c -->
                <div class="slds-col slds-size_1-of-8">
                    <lightning-record-edit-form object-api-name="RPM_Note__c">
                        <label>Property</label>
                        <lightning-input-field name="Property" field-name="Property_Legal_Entity__c" value={item.propertyId} data-id={item.id} data-property={item.id} variant="label-hidden" disabled={item.boolProperty} onchange={handleDisableBools}></lightning-input-field>
                    </lightning-record-edit-form>
                </div>

                <!-- Client (Company) -->
                <div class="slds-col slds-size_1-of-8">
                    <lightning-record-edit-form object-api-name="RPM_Note__c">
                        <label>Client</label>
                        <lightning-input-field name="Client" field-name="Client__c" value={item.client} data-id={item.id} data-client={item.id} variant="label-hidden" disabled={item.boolClient} onchange={handleDisableBools}></lightning-input-field>
                    </lightning-record-edit-form>
                </div>

The javascript reads the name attribute, the value of the target, and the row, and based on those values updates the opposite input's disable value.

handleDisableBools(event) {
        let updatedUserInputArray = [];
        let updatedBoolMap = new Map();
        let boolClient;
        let boolProperty;

        for (const element of this.userInput) {
            updatedBoolMap = this.updateDisableBools(event, element);
            boolClient = updatedBoolMap.get('boolClient');
            boolProperty = updatedBoolMap.get('boolProperty');

            updatedUserInputArray.push(this.updateUserInput(element, boolClient, boolProperty));
        }

        this.userInput = updatedUserInputArray;     
    }

updateDisableBools(event, rowElement) {
        let boolMap = new Map(
            [
                ['boolClient', rowElement.boolClient],
                ['boolProperty', rowElement.boolProperty]
            ]
        );            

        if (event.target.name == "Client") {
            if (event.target.value != '') {
                if (rowElement.id == event.target.dataset.id) {
                    boolMap.set('boolProperty', true);
                    boolMap.set('boolClient', false);
                }
            } else if (event.target.value == '') {
                if (rowElement.id == event.target.dataset.id) {
                    boolMap.set('boolProperty', false);
                    boolMap.set('boolClient', false);
                }
            }
        } else if (event.target.name == "Property") {
            if (event.target.value != '') {
                if (rowElement.id == event.target.dataset.id) {
                    boolMap.set('boolProperty', false);
                    boolMap.set('boolClient', true);
                }
            } else if (event.target.value == '') {
                if (rowElement.id == event.target.dataset.id) {
                    boolMap.set('boolProperty', false);
                    boolMap.set('boolClient', false);
                }  
            }
        }

        return boolMap;
    }

updateUserInput(rowElement, boolClient, boolProperty) {
        let userInputObject = {
            id: rowElement.id,
            category: this.template.querySelector(`[data-category="${rowElement.id}"]`).value,
            propertyId: this.template.querySelector(`[data-property="${rowElement.id}"]`).value == '' ? null : this.template.querySelector(`[data-property="${rowElement.id}"]`).value,
            client: this.template.querySelector(`[data-client="${rowElement.id}"]`).value,
            date: this.template.querySelector(`[data-date="${rowElement.id}"]`).value,
            timeSpent: this.template.querySelector(`[data-time="${rowElement.id}"]`).value,
            notes: this.template.querySelector(`[data-notes="${rowElement.id}"]`).value,
            actionItems: this.template.querySelector(`[data-action-items="${rowElement.id}"]`).value,
            actionDate: this.template.querySelector(`[data-action-date="${rowElement.id}"]`).value,
            boolClient: boolClient,
            boolProperty: boolProperty
        };

        return userInputObject;
    }

I was working within an existing LWC, where it was updating the entire userInput for each change to an input. I did not alter this piece although I'm sure there is a way to only update the input that changed rather than rewrite the entire component's data.