1

I have a list of records and an accordion style form for each record:

enter image description here

this is achieved with aura:iteration and few <tr> tags.

I've used the indexVar on aura:iteration to uniquely identify records, i.e. <div id={!'myDiv'+i}>. This has worked well, except now I am trying to actually get fields form the forms.

Let us say we have three text input fields:

input1 [ ]

input2 [ ]

input3 [ ]

I want to automatically save the values in the form onChange. Ideally, we would simply pass the value to a JS controller which would handle the save.

Using default markup attributes do not work:

onclick gets stripped (struck?) away by lightning. They prefer you use <ui:inputText>. This is fine since it has the change attribute, but you can't set ID's dynamically on them. You cannot define the id attribute on a ui-element (<ui:inputText id='..' throws an error). You also cannot dynamically set aura:id (aura:id={!'myDiv'+i} does not work).

So back to our three input fields example, how can you find the correct inputText field? There may be hundreds of inputText fields, and we need to know which input field has changed and which value it has changed to.

  • Do share the relevant code part as well, it's quite hard to identify the issue. – itzmukeshy7 Mar 25 '18 at 5:29
1

This has a similar solution to this issue:

How to remove items from a dynamic list in Lightning component?

It doesn't feel clean, but this will return both the value and the input that called it:

Component

<div class="slds-form-element__control">
    <ui:inputPhone class="slds-input" placeholder="{!Phone}" change='c.save'>
    </ui:inputPhone>
    <span id="{!'thisInput'+i}"></span>
</div>

Controller

save: function(cmp, evt){
  var targetCmp = evt.getSource();
  var val = targetCmp.get('v.value');
  var inputId = targetCmp.getElement().nextSibling.nextSibling.id;

  console.log(value);
  console.log(inputId);
}

If you're wondering why the double "nextSibling", it's because the ui:input renders something like:

<!--render facet: 0000:00;a-->

following the element.

I do hope there is a better way to do this.

  • This will not work change='c.save' correct binding is change={!c.save}" – itzmukeshy7 Mar 25 '18 at 5:27

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.