Knockout.js 在Magento 2签出中提交自定义表单后，转到下一步

我创建了一个模块，为Magento 2签出添加了一个新步骤。此步骤有一个自定义表单。提交表格时，我不知道下一步该怎么做

checkout\u index\u index.xml

custom-checkout-form.html

<div>
<form id="custom-checkout-form" class="form" data-bind="attr: {'data-hasrequired': $t('* Required Fields')}">
    <fieldset class="fieldset">
        <!-- ko foreach: getRegion('custom-checkout-form-fields') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </fieldset>
    <button type="button" data-bind="click: onSubmit" class="action">
        <span data-bind="i18n: 'Submit'"></span>
    </button>
</form>

因此，我尝试在自定义签出表单中使用my-step-view.js中的navigateToNextStep（），但我不确定如何引用它。我还研究了为getRegion提供参数。我刚开始使用Magento 2和KnockoutJS，如果这是一个有点愚蠢的问题，我很抱歉。我按照Magento 2开发文档创建了新的步骤和自定义表单。提前感谢：）

---

我需要在custom-checkout-form.js中添加stepNavigator作为参数

/*global define*/
define([
  'Magento_Ui/js/form/form',
  'Magento_Checkout/js/model/step-navigator'
], function(Component, stepNavigator) {
'use strict';
return Component.extend({
    initialize: function () {
        this._super();
        // component initialization logic
        return this;
    },

    /**
     * Form submit handler
     *
     * This method can have any name.
     */
    onSubmit: function() {
        // trigger form validation
        this.source.set('params.invalid', false);
        this.source.trigger('customCheckoutForm.data.validate');

        // verify that form data is valid
        if (!this.source.get('params.invalid')) {
            // data is retrieved from data provider by value of the customScope property
            var formData = this.source.get('customCheckoutForm');
            // do something with form data
            console.dir(formData);
            stepNavigator.next();
        }
    }
  });
});

---

你能帮我在结帐页面上添加自定义下拉列表吗？

<!--The 'step_code' value from the .js file should be used-->

<div id="checkout-step-title"
     class="step-content"
     data-role="content">

    <!-- ko foreach: getRegion('custom-checkout-form-container') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->
</div>

/*global define*/
define([
'Magento_Ui/js/form/form',
'Magento_Checkout/js/model/step-navigator'
], function(Component) {
'use strict';
return Component.extend({
    initialize: function () {
        this._super();
        // component initialization logic
        return this;
    },

    /**
     * Form submit handler
     *
     * This method can have any name.
     */
    onSubmit: function() {
        // trigger form validation
        this.source.set('params.invalid', false);
        this.source.trigger('customCheckoutForm.data.validate');

        // verify that form data is valid
        if (!this.source.get('params.invalid')) {
            // data is retrieved from data provider by value of the customScope property
            var formData = this.source.get('customCheckoutForm');
            // stepNavigator.next();
            // do something with form data
            console.dir(formData);
            this.navigateToNextStep();
        }
    }
});
});

<div>
<form id="custom-checkout-form" class="form" data-bind="attr: {'data-hasrequired': $t('* Required Fields')}">
    <fieldset class="fieldset">
        <!-- ko foreach: getRegion('custom-checkout-form-fields') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </fieldset>
    <button type="button" data-bind="click: onSubmit" class="action">
        <span data-bind="i18n: 'Submit'"></span>
    </button>
</form>

/*global define*/
define([
  'Magento_Ui/js/form/form',
  'Magento_Checkout/js/model/step-navigator'
], function(Component, stepNavigator) {
'use strict';
return Component.extend({
    initialize: function () {
        this._super();
        // component initialization logic
        return this;
    },

    /**
     * Form submit handler
     *
     * This method can have any name.
     */
    onSubmit: function() {
        // trigger form validation
        this.source.set('params.invalid', false);
        this.source.trigger('customCheckoutForm.data.validate');

        // verify that form data is valid
        if (!this.source.get('params.invalid')) {
            // data is retrieved from data provider by value of the customScope property
            var formData = this.source.get('customCheckoutForm');
            // do something with form data
            console.dir(formData);
            stepNavigator.next();
        }
    }
  });
});