1

I'm trying to enable a lightning:button if a lightning:inputField changes.

This is the aura:component:

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" controller="ManageContactsComponentController" access="global" >

<aura:handler name="init" action="{!c.getContactsList}" value="{!this}" />
<aura:attribute name="contactList" type="List" />

<!-- Lightning card to show contacts -->

<lightning:icon iconName="action:add_contact" size="small"/>
    <lightning:card>
    <!-- Lightning card here -->
    <p class="slds-p-horizontal_small">
        <aura:iteration items="{!v.contactList}" var="contact">
            <!-- Form record view -->
              <lightning:recordEditForm aura:id ="editFormId" recordId="{!contact.Id}" objectApiName="Contact">
                   <div class="slds-box slds-theme_shade">
                   <!-- Fields in record edit form -->
                    <lightning:outputField fieldName="Name" />
                    <lightning:outputField fieldName="Email" />
                    <lightning:inputField fieldName="Email" onchange="{!c.buttonAction}"/>
                    <lightning:outputField fieldName="Phone" />
                    <lightning:inputField fieldName="Email_Type__c" />
                    <!-- Submit email or / and email type change -->
                   <lightning:button aura:id="submit" type="submit" label="Update record" disabled="true" onclick="{!c.handleClick}" class="slds-m-top_medium" />
                </div>
            </lightning:recordEditForm>
         <br />
        </aura:iteration>
    </p>
    <!-- Lightning card actions -->
    <aura:set attribute="actions">
        <!-- New button added -->
        <!--<lightning:button label="New" onclick="{!c.newContact}" />-->
    </aura:set>
</lightning:card>

From that component the line that sets the lightning:button back to "false" is this one:

 <lightning:inputField fieldName="Email" onchange="{!c.buttonAction}"/>

At the bottom of the recordEditForm you can find the button I'm trying to set back to disable="true"

 <lightning:button aura:id="submit" type="submit" label="Update record" disabled="true" onclick="{!c.handleClick}" class="slds-m-top_medium" />

This is the controller that have both functions involved in this operation:

  ({
getContactsList : function(component, event, helper) {
    helper.fetchContacts(component, event, helper);
},

 buttonAction: function(component, event, helper){
 component.find("submit").set("v.disabled", false);
},

handleClick : function (cmp, event, helper) {
    alert("Record Saved");
}


})

As you can see the buttonAction function finds the auraid:"submit" which is part of a button and change the attribute disabled="true" back to "false".

These are working fine but here comes the problem. If the recordEditForm contains more than one Contact as part of the iteration an error shows up:

[NoErrorObjectAvailable] Script error. a()@https://myurl/auraFW/javascript/Je-xU-joOZELy6sVXOpMbQ/aura_prod.js:889:85 {anonymous}()@https://static.eu16.salesforce.com/auraFW/javascript/Je-xU-joOZELy6sVXOpMbQ/aura_prod.js:889:278 L.dispatchEvent()@https://static.eu16.salesforce.com/auraFW/javascript/Je-xU-joOZELy6sVXOpMbQ/aura_prod.js:3:35709 L.dispatchChangeEventWithDetail()@https://myurl.lightning.force.com/components/lightning-input.js:2:25706 L.dispatchChangeEvent()@https://myurl.force.com/components/lightning-input.js:2:28779 L.handleChange()@https://myurl.force.com/components/lightning-input.js:2:28008

Nothing like this happens when a single contact is part of the iteration. On a single contact the<lightning:inputField fieldName="Email" fires {!c.buttonAction} and the lightning button is visable.

On multiple contacts, coming out of the iteration, if I change the value <lightning:inputField fieldName="Email" in one contact, the function fires and the error shows up. I think that this is probably because all records in the iteration are sharing the same aura:id="submit" button.

So I was wondering how can I isolate each contact to allow me to use this logic and not get that error in case of multiple contacts. I just want to make sure that only the contact that I'm changing will show or enable back the "submit" bottom.

Any ideas on how I can accomplish this?

1
  • When there are multiple buttons with the same aura:id, component.find returns an array. I think the code between the iteration should be a component in itself so the fields and the button are scoped i.e.each component having record edit form and the button.
    – manjit5190
    Nov 22, 2018 at 14:18

0

You must log in to answer this question.