0

I need a way to keep track of each iterated lightning:inputField so that any changes made to that specific field is reflected by a CSS style change.

Markup

    <aura:iteration items="{!v.layoutAPIFieldsList}" var="e" indexVar="i">
       <aura:if isTrue="{!e.APIName != 'requestDocType__c'}">
          <lightning:layoutItem padding="around-small" size="6"> 
             <lightning:inputField aura:id="{!e.APIName}"
                                   fieldName="{!e.APIName}" 
                                   onchange="{!c.changeInputField}" />
          </lightning:layoutItem>  
      </aura:if>
   </aura:iteration>

JS Controller

changeInputField : function(component, event, helper){  
    var cmpTarget = component.find(/* Iterated Variable */);
    $A.util.addClass(cmpTarget, 'unsavedChanges');      
},

Here in the JS is where I want to pass the iterated variable and apply the CSS. Maybe I should locate it by index or aura:id?

  • 1
    I think event.getSource() will give you a reference to the component. So you should be able to pass it in to the addClass() function? – Ranga Aug 6 '18 at 16:11
  • Also. Note that aura:id’s cannot be assigned dynamically – glls Aug 6 '18 at 19:03
0

As @glls said - aura:id’s cannot be assigned dynamically

The solution I have for that (For this question and with help of @sfdcfox) is to assign an id to the html element - so you can try in your component markup:

<aura:iteration items="{!v.layoutAPIFieldsList}" var="e" indexVar="i">
   <aura:if isTrue="{!e.APIName != 'requestDocType__c'}">
      <lightning:layoutItem padding="around-small" size="6"> 
         <lightning:inputField id="{!e.APIName}"
                               fieldName="{!e.APIName}" 
                               onchange="{!c.changeInputField}" />
      </lightning:layoutItem>  
  </aura:if>

And then in the js controller:

changeInputField : function(component, event, helper){  
    var cmpTarget = document.getElementById(/* Iterated Variable */);
    $A.util.addClass(cmpTarget, 'unsavedChanges');      
},
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.