Angular2のFormControlNameの動的バインド

Question

入れ子コンポーネントを作成しています。私はそれらを動的にバインドしたい複数のformGroupsを持っている。たとえば。 HTMLは、それが複数のコントロールのためにある&のようなものがある

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

のようなコンポーネントで

forGroupは..私は、共通のコンポーネントにコントロールをバインドしたい

<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を使用して結合行うことです（例では、2つのバリデータを含んでいます最後のフィールド）：

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]    
});