在Angular2中使用带有FormGroup的jquery-steps
发布时间:2020-12-17 17:22:34 所属栏目:安全 来源:网络整理
导读:请参阅以下示例.我已经将 jquery和 jquery-steps加载到项目中并且它正在运行.但是,在渲染视图后,更改输入框中的数据不会更新表单组mainForm中的值.我相信原因是jquery-steps动态删除并重构了表单的html,因此表单组不再链接到DOM. 在jquery-steps重构html之后
请参阅以下示例.我已经将
jquery和
jquery-steps加载到项目中并且它正在运行.但是,在渲染视图后,更改输入框中的数据不会更新表单组mainForm中的值.我相信原因是jquery-steps动态删除并重构了表单的html,因此表单组不再链接到DOM.
在jquery-steps重构html之后,有没有办法将FormGroup mainForm重新绑定到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: ['',confirm: ['',acceptTerms: ['',}); } ngAfterContentInit() { $("#mainForm").steps(); } } 解决方法
这不起作用的主要原因是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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |