Angular2でフォームビルダを反復処理する方法は？

Question

フォームコントロールを反復しようとしましたが、問題が発生します。 Angular2のFormBuilderを使用します。

私は自分のコントローラ内のコードを次している：コンソールに次の出力が得られます

ngOnInit() { 
    let data = this.dataSet[this.key]; 
    this.form = this._fb.group({}); 

    Object.keys(data).forEach(name => { 
     this.form.addControl(name, new FormControl()); 
     this.form.controls[name].setValue(data[name]); 
    }); 

    console.log(this.form); 
    } 

：これまでのためにOKになります

FormGroup 
    ... 
    controls: Object 
    database1: FormControl 
     ... 
     _value: Object 
     accessHost: "some host here" 
     accessKey: "the key here" 
.... 
    database2: FormControl 
     ... 
     _value: Object 
     accessHost: "some host here" 
     accessKey: "the key here" 

を。 HTMLコード：

<form [formGroup]="form" (ngSubmit)="onSave(form)"> 
    <div *ngFor="let ups of form.controls | keyVal; let i=index"> 
    {{ups.key}} 
    <div class="form-group"> 
     <input class="form-control" formControlName="{{ups.key}}"> 
    </div> 
    </div> 
</form> 

しかし、この部分が動作していない：私はの値をチェックすると

<input class="form-control" formControlName="{{ups.key}}"> 

{{ups.key}}は、それが "DATABASE1" です。この場合の "database1"はFormControlNameではありませんか？

<input class="form-control" [formControlName]="ups.key" /> 

お知らせ[]属性arroundの：あなたは式にformControlName属性をバインドする必要があり、ヘルプ

Answer 1

ため

感謝。 この料理の本を見てみましょう。Dynamic Form @kcpが提案しています。