Metronic step buttons doesn't work when using formControlName in Angular 8 form

Question

I am trying to create keenthemes metronic angular 8 wizard. I used to formgroup for binding form inputs. But it doesnt work when using formgroup.

Here is html template:

            <div class="kt-form__actions">
                <div class="btn btn-secondary btn-md btn-tall btn-wide kt-font-bold kt-font-transform-u"
                    data-ktwizard-type="action-prev">
                    Önceki
                </div>
                <div (click)="onSubmit()"
                    class="btn btn-success btn-md btn-tall btn-wide kt-font-bold kt-font-transform-u"
                    data-ktwizard-type="action-submit"
                    [ngClass]="{'kt-spinner kt-spinner--right kt-spinner--md kt-spinner--light': loading$ | async}">
                    Güncelle
                </div>
                <div class="btn btn-brand btn-md btn-tall btn-wide kt-font-bold kt-font-transform-u"
                    data-ktwizard-type="action-next">
                    Sonraki
                </div>
            </div>

Here is KTWizard settings in the component:

 ngAfterViewInit(): void {
        // Initialize form wizard
        const wizard = new KTWizard(this.el.nativeElement, {
      startStep: 1,
      manualStepForward: true,
      clickableSteps: true
        });

    // Validation before going to next page
    wizard.on('beforeNext', (wizardObj) => {

      wizard.on('change', () => {
        setTimeout(() => {
          KTUtil.scrollTop();
        }, 500);
      });
    });
    }

What is the solution for this issue in metronic?

Thanks.

Answer 1

I don't know the methodology of angular but, Metronic in its latest version has changed the wizard operation without warning, if before we had:

 wizard.on('beforeNext', (wizardObj) => {
// instructions
});

Now we only need:

wizard.on('change', (wizardObj) => {
// instructions
});

Answer 2

Try this workaround:

this.wizard.on('change', (wizard) => {
    var currentStep = wizard.getStep();
    var newStep = wizard.getNewStep();

    if (newStep > currentStep ) {               
        console.log("--beforeNext--");
    }
    else {
        console.log("--beforePrev--");
    } 
)};

Answer 3

I had a similar issue using the html version. Make sure your form id is exactly the same as the one in the template, in my case setting id="kt_form" solved the issue!