将jQuery-steps与Angular2中的FormGroup一起使用 [英] Use jquery-steps with FormGroup in Angular2

问题描述

请参阅以下示例.我已经将jquery和jquery-steps加载到项目中，并且可以正常工作.但是，渲染视图后，更改输入框中的数据不会更新表单组mainForm中的值.我相信原因是jquery-steps动态删除并重构了表单的html，因此表单组不再链接到DOM.

Please see the following examples. I have loaded jquery and jquery-steps into the project already and it is working. However after rendering the view, changing the data in the input boxes doesn't update the values in the form group mainForm. I believe the reason is that jquery-steps dynamically removed and reconstructed the html for the form, and so the form group doesn't link to the DOMs anymore.

在jquery-steps重建html之后，有什么方法可以将FormGroup mainForm重新绑定到DOM吗?

Is there any way to re-bind FormGroup mainForm to the DOMs after jquery-steps reconstructed the html?

我读到有关ComponentResolver和ViewContainerRef的信息，它应该在哪里使用?您能举一个例子在这种情况下如何使用它们吗?

I read about ComponentResolver and ViewContainerRef, is it where it should use those? Could you give me an example how to use those in this situation?

谢谢！

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

推荐答案

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

The main reason why that is not working is that jquery-steps plugin removes your html markup.

在angular2中使用jquery不是一个好主意，但是如果您想使其正常运行，我可以为您提供一些修改库

Using jquery in angular2 is bad idea but if you want to get it working i can offer you slightly modify the library

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())),

另请参见 柱塞示例

See also Plunker Example

这篇关于将jQuery-steps与Angular2中的FormGroup一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！