angular - 在 Angular2 中将 jquery-steps 与 FormGroup 结合使用

Question

请看下面的例子。我已经将 jquery 和 jquery-steps 加载到项目中并且它正在运行。然而，在呈现 View 之后，更改输入框中的数据不会更新表单组 mainForm 中的值。我认为原因是 jquery-steps 动态删除并重建了表单的 html，因此表单组不再链接到 DOM。

在 jquery-steps 重构 html 后，是否有任何方法可以将 FormGroup mainForm 重新绑定(bind)到 DOM？

我阅读了有关 ComponentResolver 和 ViewContainerRef 的内容，应该在哪里使用它们？你能举例说明如何在这种情况下使用它们吗？

谢谢!

<pre>{{ mainForm.value | json }}</pre>

<form [formGroup]="mainForm" id="mainForm" action="#">
    <h1>Account</h1>
    <div>
        <label for="userName">User name *</label>
        <input formControlName="userName" type="text" class="required">
        <label for="password">Password *</label>
        <input formControlName="password" type="text" class="required">
        <label for="confirm">Confirm Password *</label>
        <input formControlName="confirm" type="text" class="required">
        <p>(*) Mandatory</p>
    </div>
    <h1>Finish</h1>
    < div>
        <input formControlName="acceptTerms" type="checkbox" class="required"> 
        <label for="acceptTerms">I agree with the Terms and Conditions.</label>
    </div>
</form>

import {Component, AfterContentInit} from "@angular/core";
import {FormBuilder, Validators, FormGroup} from "@angular/forms";

@Component({
    templateUrl: 'main-view.template.html'
})
export class MainViewComponent implements AfterContentInit {

    private mainForm: FormGroup;

    constructor(private formBuilder: FormBuilder) {
        this.mainForm = this.formBuilder.group({
            userName: ['', Validators.required],
            password: ['', Validators.required],
            confirm: ['', Validators.required],
            acceptTerms: ['', Validators.required],
        });
    }

    ngAfterContentInit() {
        $("#mainForm").steps();
    }
}

Answer 1

这不起作用的主要原因是 jquery-steps 插件删除了您的 html 标记。

在 angular2 中使用 jquery 是个坏主意，但如果你想让它工作，我可以为你提供稍微修改库

jquery.steps.js

function render(wizard, options, state) {
+    var contentWrapper = $('<{0} class=\"{1}\"></{0}>'.format(options.contentContainerTag, "content " + options.clearFixCssClass));
+    contentWrapper.append(wizard.children());
    // Create a content wrapper and copy HTML from the intial wizard structure
    var wrapperTemplate = "<{0} class=\"{1}\">{2}</{0}>",
        orientation = getValidEnumValue(stepsOrientation, options.stepsOrientation),
        verticalCssClass = (orientation === stepsOrientation.vertical) ? " vertical" : "",
-       //contentWrapper = $(wrapperTemplate.format(options.contentContainerTag, "content " + options.clearFixCssClass, wizard.html())),

另见 Plunker Example