Lightning Component: Retrieve values from dynamic forms

Question

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

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.

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