Angular2中FormControlName的動態綁定

Question

我正在創建嵌套組件。有多個formGroups我想動態地綁定它們。例如。

forGroup的組件就像

formGroup : { 
    controls:{ 
     firstName: FormControl, 
     lastName: FormControl, 
     userName: FormControl, 
     Password: FormControl 
    } 
} 

HTML是一樣的東西&它是多個控件..

<div [formGroup]='formGroup'> 
    <div class="error-box">{{formGroup.controls.get('firstName').errors}}</div> 

    <div *ngIf="formControl.firstName?.visible" [ngClass]="{'has-error': formControl.firstName.error}"> 
     <label>{{formGroup.controls.get('firstName').label}}</label> 
     <input type="text" formControlName="firstName" [maxlength]="formContrl.firstName?.maxLength"> 
     <span class="error" *ngif="formControl.firstName.error"></span> 
    </div> 

    <div class="error-box">{{formGroup.controls.get('lastName').errors}}</div> 

    <div *ngIf="formControl.lastName?.visible" [ngClass]="{'has-error': formControl.lastName.error}"> 
     <label>{{formGroup.controls.get('lastName').label}}</label> 
     <input type="text" formControlName="lastName" [maxlength]="formContrl.lastName?.maxLength"> 
     <span class="error" *ngif="formControl.lastName.error"></span> 
    </div> 
</div> 

我要綁定在共同分量的控制。

我試過了。

<text-input [group]="formGroup.controls.firstName" [formControls]="formControl.firstName"></text-input> 

所以我創建普通的HTML，但是當我試圖綁定這個公司給我上結合指令formControlName="formControls.name //withwhat I am passing"

Answer 1

恰好碰到了同樣的問題...

你必須使用[formControlName]="formControls.name"而不是formControlName="formControls.name"。

更多的信息在這裏https://angular.io/docs/ts/latest/cookbook/dynamic-form.html。

Answer 2

這是可能的嵌套形式的錯誤。我想你會發現你在這篇文章中所需要的：

How to Build Nested Model-driven Forms in Angular 2

如果不需要嵌套形式則是非常簡單的，只是做用FormBuilder結合（例子包括在兩個驗證最後一個字段）：

import { FormBuilder, Validators, FormGroup } from '@angular/forms';

let myForm = formBuilder.group({ 
    firstName: [this.myModel.firstName], 
    lastName: [this.myModel.lastName], 
    userName: [this.myModel.userName, Validators.required], 
    Password: [this.myModel.Password, Validators.required]    
});