TransWikia.com

Multiple input inside aura:iteration table

Salesforce Asked by nom on December 22, 2021

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

One Answer

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}"/>

Answered by Amit on December 22, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP