Nicholas Nicholas - 15 days ago 8
TypeScript Question

Use jquery-steps with FormGroup in Angular2

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.

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

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?

Thank you!

<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

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

Comments