angular2動的に生成された入力から情報をキャプチャする - 可能ですか？

Question

可変サイズの配列の入力を生成して取り込みたい更新フォームで作業する

現在の不幸なバージョンは、constituency配列の最初の3つの静的に定義された要素しかサポートしていません。だから、入力は次のようになり...

<input #newConstituency1 class="form-control" value={{legislatorToDisplay?.constituency[0]}}> 
    <input #newConstituency2 class="form-control" value={{legislatorToDisplay?.constituency[1]}}> 
    <input #newConstituency3 class="form-control" value={{legislatorToDisplay?.constituency[2]}}> 

および更新する機能は、静的なシャープタグを使用して、フォームの値を取得します。

updateLegislator(newConstituency1.value, newConstituency2.value, newConstituency3.value) 

しかし、これは可変サイズのConstituency配列を考慮していません。

<div *ngfor constit of legislatorToDisplay?.constituency> 
    <input value={{constit}}> 
</div> 

が、成功し、その後、その情報を取得することができていない：

は私が動的に理論的には無限のサイズの選挙アレイ用の入力フィールドを作成するために*ngForディレクティブを使用することができています。どんな種類の支援も大歓迎です。

Answer 1

は、先ほど作成したHTML入力コンポーネントと一致するコンポーネントにフォームオブジェクトを持っている必要があります。

テンプレート

<div *ngfor constit of legislatorToDisplay?.constituency> 
    <input value={{constit}} formControlName="{{constit}}"> 
</div> 

コンポーネント

/* create an empty form then loop through values and add control 
    fb is a FormBuilder object. */ 
let form = this.fb.group({}); 
for(let const of legislatorToDisplay.constituency) { 
    form.addControl(new FormControl(const)) 
} 

Answer 2

結合使った双方向データ：

<div *ngFor="constit of legislatorToDisplay?.constituency; let i = index"> 
    <input [(ngModel)]="legislatorToDisplay?.constituency[i]"> 
</div>