angular2のngFormを使用して配列値を取得する方法はありません

Question

たとえば、このようなコンポーネントを書きました。

Object {people: "bob"} 

私の期待がある一方：

Object {people: ["tom", "bob"]} 

ですI入力 "トム" と各フォームの "ボブ" や "提出" ボタンをクリックし、コンソールは言う

@Component({ 
    selector: 'home', 
    template: 
     ` 
     <form (ngSubmit)="onSubmit(f)" #f="ngForm"> 
      <input type="text" ngControl="people"> 
      <input type="text" ngControl="people"> 
      <input type="submit"> 
     </form> 
    ` 
}) 
export class Home { 
    onSubmit(f) { 
     console.log(f.value); 
    } 
} 

ngFormを使用して配列の値を取得することは可能ですか？

Answer 1

これは、ControlArrayを使用して私の要件を満たす例です。

import {Component} from 'angular2/core'; 
import {FORM_DIRECTIVES, Control, FORM_PROVIDERS, FormBuilder} from 'angular2/common'; 

@Component({ 
     selector: 'home', 
     template: 
      ` 
      <form [ngFormModel]="sampleForm" (ngSubmit)="onSubmit(sampleForm)"> 
       <div ngControlGroup="people"> 
        <div *ngFor="let item of sampleForm.controls.people.controls; let i = index"> 
         <input type="text" ngControl='{{ i }}'> 
         <button (click)="delPerson(i)">Del</button> 
        </div> 
       </div> 
       <button (click)="addPerson($event)">Add</button> 
       <input type="submit"> 
      </form> 
     `, 
     providers: [FORM_PROVIDERS] 
    }) 
export class Home { 

    sampleForm: any; 

    constructor(private builder: FormBuilder) { 
     this.sampleForm = this.builder.group({ 
      people: this.builder.array([new Control()]) 
     }); 
    } 

    addPerson(event) { 
     event.preventDefault(); 
     this.sampleForm.controls.people.push(new Control()); 
    } 

    delPerson(i: number) { 
     this.sampleForm.controls.people.removeAt(i); 
    } 

    onSubmit(f) { 
     console.log(f.value); 
    } 
} 

これは私のためにうまく動作しますが、私はこの部分（let item of sampleForm.controls.people.controls）が美しいではないと私は、これはngFormの良い使い方で分からないと思います。

Answer 2

私はあなたの人々のためのngModel /制御対応のサブコンポーネントを作成します：あなたはこのようにそれを使用することができます

const PEOPLE_VALUE_ACCESSOR = new Provider(
    NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => PeopleComponent), multi: true}); 

@Component({ 
    selector: 'people', 
    template: ` 
    <div> 
     Person 1 : <input [(ngModel)]="person1" (ngModelChange)="doOnChange()"/><br/> 
     Person 2 : <input [(ngModel)]="person2" (ngModelChange)="doOnChange()"/> 
    <div> 
    `, 
    providers: [ PEOPLE_VALUE_ACCESSOR ] 
}) 
export class PeopleComponent implements ControlValueAccessor { 
    onChange = (_) => {}; 
    onTouched =() => {}; 

    writeValue(value:any):void { 
    if (value!=null) { 
     this.person1 = value[0]; 
     this.person2 = value[1]; 
    } 
    } 

    doOnChange(elt) { 
    this.onChange([ this.person1, this.person2 ]); 
    } 

    registerOnChange(fn: (_: any) => void): void { this.onChange = fn; } 
    registerOnTouched(fn:() => void): void { this.onTouched = fn; } 
} 

：関連する制御（ここではpeople.value）内

<form> 
    <div> 
    <people #people="ngForm" ngControl="people"></people> 
    people : {{people.value}} 
    </div> 
</form> 

、あなたが持っています配列。

このplunkr：https://plnkr.co/edit/ix8unZ58hvqojjAic0E3?p=previewを参照してください。