I have requirement to call a child controller function from parent controller whenever the event occurs in parent side.
for e.g
ABC is parent component and DCE is child component, this child component has Span of Text tag and X symbol. when I click on x it is clearing the value using child controller. ABC parent component has Form element and child component is one one of in form.
My requirement is to clear the this child component value when parent component button is clicked.
here is the below sample code of what am trying because i cannot post actual code here
ParentComponent.cmp
<aura:registerEvent name="clrValues" type="c:ClearValues"/>
<div>
<c:ChildComponent textValue="test"/>
<ui:button label="Save"/>
<ui:button label="Clear" press="{!c.clear}"/>
</div>
</aura:component>
ParentController.js
({
clear : function(component, event, helper) {
var evtFire = component.getEvent("clrValues");
evtFire.fire();
}
})
ClearValues.evt
<aura:event type="APPLICATION" description="Event template" />
ChildComponent.cmp
<aura:component >
<aura:handler name="setValues" event="c:ClearValues" action="{!c.clear}"/>
<aura:attribute name="textValue" type="String" default="test"/>
<div >
<ui:inputText label="Expense Name" value="{!v.textValue}" aura:id="input1"/>
</div>
</aura:component>
ChildController.js
({
clear : function(component, event, helper) {
helper.clearValues(component,event);
}
})