Tenho um componente onde estou construindo um lightning:recordEditForm
usando campos baseados em conjuntos de campos diferentes que parecem um algo assim:
<aura:component> <aura:attribute name="fieldApiNames" type="List" /> <aura:attribute name="showSpinner" type="Boolean" default="true" /> <aura:if isTrue="{!v.showSpinner}"> <lightning:spinner alternativeText="Loading..." /> </aura:if> <lightning:recordEditForm onload="{!c.handleLoad}" objectApiName="Account"> <lightning:messages /> <lightning:layout multipleRows="true"> <aura:iteration items="{!v.fieldApiNames}" var="api"> <lightning:layoutItem aura:id="formItems" size="6"> <div aura:id="top-div" /> <lightning:inputField aura:id="field" fieldName="{!api}" /> <div aura:id="bottom-div" /> </lightning:layoutItem> </aura:iteration> </lightning:layout> </lightning:recordEditForm> <lightning:button title="Show Field Values" onclick="{!c.handleButton}" /> </aura:component>
Quando você chama find()
em um aura:id
que ocorre várias vezes, você obtém um array de tudo com aquele aura:id
. Se eu quisesse acessar um elemento dentro do corpo de um dos elementos retornados com minha chamada find()
, poderia fazer isso com aura:id
do referido subelemento como abaixo, na handleButton
função?
({ handleLoad : function(cmp, evt, helper) { cmp.set( "v.showSpinner", false ); }, handleButton : function(cmp, evt, helper) { var first = cmp.get("v.fieldApiNames")[0]; cmp.find("formItems").forEach( function(item) { alert( item.find("field").get("v.value") ); <== ? } ); } })
Comentários
Resposta
Parece que esta “localização aninhada” (per se) não é possível. Optei por criar dinamicamente cada lightning:layoutItem
e cada, respectivamente, aninhado lightning:inputField
em um init
manipulador para meu componente. Isso me permitiu atribuir um aura:id
à medida que criava cada componente individual.
Resposta
você deve usar foreach
para lightning:inputField
id de aura, então você obtém array de cmps de campos de entrada e faz foreach e obtém valores como o que eu tentei abaixo
controller.js
handleButton : function(cmp, evt, helper) { var first = cmp.get("v.fieldApiNames")[0]; cmp.find("field").forEach( function(itemcmp) { alert( itemcmp.get("v.value") ); <== ? } ); }
Comentários
- Isso funcionaria em cenários onde o caso de uso é exatamente o mesmo do meu exemplo. Infelizmente (e peço desculpas se isso foi uma prática inadequada), meu exemplo não é meu caso de uso exato. Eu estava tentando simplificar para encontrar uma resposta sem muito detalhe.
cmp.find("formItems").find("field").get("v.value");
?cmp.find("formItems")
porque haverá vários elementos com esseaura:id
.