Lightning components - Button to call a method from the helper?

Question

I'm doing this Trailhead.

Basically, the idea is to have one component that include a form, a button to submit the form, and a child component that display the list of items.

I'm trying to improve the basic component with adding buttons, I think it's useless to copy the whole code, but fragments could help :

• my three buttons :

                <!-- BOUTON submit-->
                  <lightning:button label="Create Expense"
                                    class="slds-m-top--medium"
                                    variant="brand"
                                    onclick="{! c.clickCreate}"/>
  
                  <!-- BOUTON delete-->
                  <lightning:button label="Delete Expenses"
                                    class="slds-m-top--medium"
                                    variant="brand"
                                    onclick="{! c.clickDelete}"/>
                  <!-- BOUTON Reinitialize-->
                  <lightning:button label="Reinitialize form"
                                class="slds-m-top--medium"
                                onclick="{! c.helper.initForm }"/>
              <!-- / CREATE NEW EXPENSE FORM -->
  

The controller clickCreate function :

clickCreate : function(cmp, event, helper) {

    // tcheck validité du formulaire
    if( !helper.isValidForm(cmp)) {
        console.log('--Erreur de datas dans le form--');
        return;
    }

    // recuperation méthode APEX
    var action = cmp.get('c.saveExpense'); //console.log('action vide ? : ' + action);
    var newExp = cmp.get('v.newExpense');

    // ajout du paramètre
    action.setParams({
        'ex' : newExp
        // 'expArray' : newExp
    });

    // console.log('--clickCreate-- action.setParams : ' + JSON.stringify(action.getParam('ex')));
    // console.log('--clickCreate-- action.setParams : ' + JSON.stringify(action.getParam('expArray')));

    // définiton du callback
    action.setCallback(this, function(resp) {
        var state = resp.getState();
        console.log('saveExpense -- resp.getState() : ' + state);

        // console.log('resp[0] : ' + resp.getReturnValue()[0]);

        if (cmp.isValid() && state.toUpperCase()==='SUCCESS') {
            // rappel de la fonction doInit en fin de compte ?!
            console.log('--call doInit for refreshing the list -I know it's bad');
            let initAgain = cmp.get('c.doInit');
            $A.enqueueAction(initAgain);

            // reinitialiser le formulaire
            helper.initForm(cmp);

        } else {
            console.log('Err d\'insert de l\'expense avec statu : ', state);
        }
    });
    $A.enqueueAction(action);
}

And the helper initForm function :

initForm : function (cmp) {
    var form = cmp.set('v.newExpense', { 'sobjectType': 'Expense__c','Name': '','Amount__c': 0.0, 'Client__c': '','Date__c': '', 'Reimbursed__c': false });
}

So the clickCreate allows to create the expense and to add it to the list, and also to reinitialize the form with blank values calling the helper initForm() function ;

The thing is I'm unable to call the initForm() method in order to assign it to the third button...

This line is not working : onclick="{! c.helper.initForm }"/>

I got ideas, but I'm not happy with it (copying the method from the helper really isn't a solution), What would be the best way to achieve my goal ?

Thanks !!

Nb : for the record the form look like this :

Answer 1

You need to declare a method in the controller that calls the helper, not invoke the helper directly on button click.

Additionally, avoid using the same name in your controller and helper functions.

ex.

callInit : function(cmp, event, helper){ 
               helper.initForm();
            }