angular - 在 Angular 8 表单中使用 formControlName 时 Metronic 步骤按钮不起作用

Question

我正在尝试创建keenthemes metronic angular 8 向导。我曾经使用 formgroup 来绑定表单输入。但是使用formgroup时它不起作用。

这是html模板：

            <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>

这是组件中的 KTWizard 设置：

 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);
      });
    });
    }

metronic中这个问题的解决方案是什么？

谢谢。

Answer 1

我不知道 Angular 的方法，但 Metronic 在其最新版本中已经更改了向导操作而没有警告，如果我们之前有：

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

现在我们只需要：

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

Answer 2

试试这个解决方法：

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

我在使用 html 版本时遇到了类似的问题。 确保您的表单 id 与模板中的完全相同，在我的情况下，设置id="kt_form"解决了这个问题！