在Angular2中使用FormGroup的jquery步骤
问题描述:
请参阅以下示例。我已经将jquery
和jquery-steps
加载到项目中并且它正在工作。但是,在渲染视图后,更改输入框中的数据不会更新表格组mainForm
中的值。我相信原因是jquery-steps
动态地删除并重建了表单的html,所以表单组不再链接到DOM。在Angular2中使用FormGroup的jquery步骤
在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: ['', Validators.required],
confirm: ['', Validators.required],
acceptTerms: ['', Validators.required],
});
}
ngAfterContentInit() {
$("#mainForm").steps();
}
}
答
为什么不工作的主要原因是jQuery的步骤插件删除你的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())),
hi yurzui ..我需要禁用继续按钮,直到我遇到确切的条件..ex:没有填写用户名用户不能允许继续(禁用按钮)。在角度上下文中,我该如何做到这一点?谢谢 – bews99