Nicholas Nicholas - 3 months ago 24
TypeScript Question

Use jquery-steps with FormGroup in Angular2

Please see the following examples. I have loaded

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
. I believe the reason is that
dynamically removed and reconstructed the html for the form, and so the form group doesn't link to the DOMs anymore.

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

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

Thank you!

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

<form [formGroup]="mainForm" id="mainForm" action="#">
<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>
<input formControlName="acceptTerms" type="checkbox" class="required">
<label for="acceptTerms">I agree with the Terms and Conditions.</label>

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

templateUrl: 'main-view.template.html'
export class MainViewComponent implements AfterContentInit {

private mainForm: FormGroup;

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

ngAfterContentInit() {


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


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