accessing a lighning inputField lookup name client side

Question

I am easily able to fetch a lookup ID from a inputField

<lightning:recordEditForm
        objectApiName="Case">

        <!-- the messages component is for error messages -->
        <lightning:messages />

        <lightning:inputField fieldName="AccountId" onchange="{!c.getAccount}"/>
        <lightning:inputField fieldName="Subject" />
        <lightning:inputField fieldName="Description" />
        <div class="slds-m-top_medium">
            <lightning:button disabled="{!v.disabled}" variant="brand" type="submit" name="save" label="Save" />
        </div>
</lightning:recordEditForm> 

controller.js

({
      getAccount : function(cmp, event, helper) {
        var accountId = event.getSource().get('v.value')
      },
})

However, I am trying to get the name/label of the acount:

My first instict was to try and get the Element, however, due to locker service, a Proxy Object is returned.

console.log(cmp.getElements());

I would have tried to get the textContent, however, I am unable to access the Object.

I know how to workaround this using some other components, referencing the id in it and then fetching the name (for example, in a second lightning:recordEditForm or Force:recordData).

I am trying to achieve this on field chage, not on recordSubmit or any of the other events provided by the form.

Obviously, I dont want to query for the account name from the server using the ID.

Is this doable, if so, what would be considered the best approach? or due to locker service there is no way around this?

Answer 1

This should solve the usecase.

    <!-- the messages component is for error messages -->
    <lightning:messages />

    <lightning:inputField aura:id="accountId" fieldName="AccountId" onchange="{!c.getAccount}"/>
    <lightning:inputField fieldName="Subject" />
    <lightning:inputField fieldName="Description" />
    <div class="slds-m-top_medium">
        <lightning:button disabled="{!v.disabled}" variant="brand" type="submit" name="save" label="Save" />
    </div>

({
      getAccount : function(cmp, event, helper) {
        var accountId = cmp.find('accountId').get('v.value')
      },
})

Answer 2

maybe you can try something like this (ugly but should work):

On the markup - add a unique id to the element:

<lightning:inputField fieldName="AccountId" id="AccountId" onchange="{!c.getAccount}"/>

Now on the controller get the label like that:

getAccount: function(component, event, helper) {
    var label = document.getElementById("AccountId").children[0].children[0].children[0].innerHTML;
}

I did not try that, but generally this concept can work