0

I have an attribute that I am rendering to a table inside an aura:iteration with the following code:

<aura:attribute name="licenceassocparties" type="String[]" default="false" access="PRIVATE"/>

<table class="slds-table slds-table--bordered slds-table--cell-buffer slds-table--striped slds-max-medium-table--stacked-horizontal"
        role="grid">
    <thead>
    <tr>
        <th class="slds-is-sortable slds-cell-wrap" scope="col">
            Name
        </th>
        <th class="slds-is-sortable slds-cell-wrap" scope="col">
            Role
        </th>
        <th class="slds-is-sortable slds-cell-wrap" scope="col">
            Email
        </th>
    </tr>
    </thead>
    <tbody>
    <aura:iteration var="party" items="{!v.licenceassocparties}">
        <tr class="slds-hint-parent">
            <td role="gridcell" class="slds-cell-wrap" data-label="Name">
                <div class="">{!party.name}</div>
            </td>
            <td role="gridcell" class="slds-cell-wrap" data-label="Role">
                <div class="" data-label="Role">{!party.role}</div>
            </td>
            <td role="gridcell" class="" data-label="Email Address">
                <div class="" data-label="Email Address">
                    <ui:inputEmail class="field"
                                   maxlength="80"
                                   mouseout="{!c.addEmails}"
                                   placeholder="Email Address"/>
                    <span id="{!'emailInput'+index}"></span>
                </div>
            </td>
        </tr>
    </aura:iteration>
    </tbody>
</table>

The 3rd column is an email input field and I would like to capture the input for each row (if it's not null, which is a valid option) and pass this data to the controller for processing. I based the below controller class on this solution (HERE) but I am getting 'undefined' for variable 'val'.

addEmails : function(component,event,helper) {
    var targetCmp = event.getSource();
    var val = targetCmp.get('v.value');
    console.log(val);
    var inputId = targetCmp.getElement().nextSibling.nextSibling.id;
    console.log(value);
    console.log(inputId);
}

Is there a cleaner way of retrieving multiple inputs from a dynamic table such as this? Any help in the right direction would be greatly appreciated.

To add further clarity of what I'm trying to achieve, the screenshot below shows a table with multiple email input fields (there can be a variable number of rows in this table, depending on the data source). What I would like to do is get any input email values (if they are not null) and add them to the correct element/position of the "licenceassocparties" array.

enter image description here

1
  • Try adding aura:id and then access the elements with cmp.find('id') this will return the element or an array of elements, use this for further checks! Oct 2, 2017 at 5:44

1 Answer 1

0

I didn't get what you are trying to achieve by this component. But Quick fix to your problem i.e getting undefined value would be to add value attribute to ui:inputEmail component.

You can keep default value as blank or some value as

<ui:inputEmail class="field" maxlength="80" mouseout="{!c.addEmails}" placeholder="Email Address" value="some value"/>

OR

You can assign attribute to value

<ui:inputEmail class="field" maxlength="80" mouseout="{!c.addEmails}" placeholder="Email Address" value="{!v.attribute}"/>
3
  • Thanks Amit. To explain better what I'm trying to achieve, I've added further info to the question. I don't think it's as simple as adding a static value to the component as the input is rendered inside of an iteration (with a variable number of rows).
    – nom
    Oct 2, 2017 at 8:15
  • By adding value as blank tag I was able to get I was able to get value in targetCmp.get('v.value'); console.log(val); Oct 2, 2017 at 8:48
  • @nom - Could you please let us know the solution for this problem? I am kind of stuck in a similar situation. Jan 9, 2018 at 13:29

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.