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?
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.