0

This is my controller :

clear : function(component,event, helper) {
    component.find('field1').forEach(function(f) {
    f.reset();
    });
    component.find('field2').forEach(function(f) {
    f.reset();
    });
    component.find('field3').forEach(function(f) {
    f.reset();
    });
    },

I am calling the method from here :

hide : function(component,event,helper){
    var elements = document.getElementsByClassName("toggle");
    elements[0].style.display = 'none';
    clear();    
},

This is the component :

<lightning:recordEditForm  recordId="{!v.recordId}" objectApiName="Contact">
                        <lightning:messages />
                        <lightning:inputField aura:id="field1" fieldName="field1" />
                        <lightning:inputField aura:id="field2" fieldName="field2" />
                        <lightning:inputField aura:id="field3" fieldName="field3" />                             
                      </lightning:recordEditForm>

When clickling onchange="{!c.hide} in the component, it hides the form but does not clear previous input. The values in the form are from restricted picklists.

1 Answer 1

0

You have two main issues here:

  1. An Aura JS controller method may not call another method defined in the Aura JS Controller. Instead, it may call methods defined in the Aura JS Helper.
  2. Your method of clearing out the recordEditForm input elements will not work as written.

YourAuraComponentController.js:

hide : function(component,event,helper){

    // Hide the element you want to hide (see comments below)
    // ...

    // Call the "clear" function in the Helper
    helper.clear(component);    
},

YourAuraComponentHelper.js:

clear : function(component) {

    component.find("field1").set("v.value", "");
    component.find("field2").set("v.value", "");
    component.find("field3").set("v.value", "");
    
    },

In general, I've found that it's best to try the "Aura / Lightning way" first before going to lower-level JS. There are good reasons for this, such as SecureComponent/LockerService, MVC framework, DOM element naming conflicts, etc.

On that point, be careful about getElementsByClassName. If you are using the component with other components, this could return elements defined in other Lightning components. Instead, to hide an element you might try this instead:

var showHideComponent = component.find("auraIdOflementYouWantToHide");

// To hide
$A.util.addClass(showHideComponent, "slds-hide");

// To show
$A.util.removeClass(showHideComponent, "slds-hide");
3
  • Thanks for the info I will try that and update
    – user77098
    Commented Feb 1, 2021 at 14:21
  • Tried it, still does not work. Maybe something else is causing this to not work. Thx.
    – user77098
    Commented Feb 1, 2021 at 15:42
  • I'd need to see more of the code. Be sure to pass the "component" object to the helper method. i.e. helper.clear(component) rather than helper.clear()
    – Todd Gill
    Commented Feb 1, 2021 at 16:29

You must log in to answer this question.