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

來源

2016-11-14 Nicholas

爲什麼不工作的主要原因是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())),

也見Plunker Example

來源

2016-11-16 06:18:47 yurzui

hi yurzui ..我需要禁用繼續按鈕，直到我遇到確切的條件..ex：沒有填寫用戶名用戶不能允許繼續（禁用按鈕）。在角度上下文中，我該如何做到這一點？謝謝 – bews99

在Angular2中使用FormGroup的jquery步驟

回答

相關問題