Angular2、ngModelとForms：リストが正しく表示されない

Question

ngModelを使用して入力項目に一連の項目が表示されています。私は基本的なコントロール（必要）とフォーム内のngFor指示を使用します。リストは正しく表示されません。常に表示される配列の最後の項目です。 入力の外側に配列を表示するには、ひげ知識の構文を使用してもOKです。私がフォームとコントロールを削除してもOKです。 ここでテストできます：plunker は、ここでは、コードです：

@Component({ 
    selector: "my-app", 
    providers: [], 
    template: " 
    <div> 
     <form [formGroup]="personControl"> 
     <div *ngFor="let person of persons; let i = index"> 
      index : {{i}}<br/> 
      label : {{person.label}}<br/> 
      value : {{person.value}}<br/> 
      <input type="text" 
       maxlength="30" 
       [id]="'label-'+person.id" 
       [(ngModel)]="person.label" 
       formControlName="personLabel"/> 
      <input type="text" 
       maxlength="30" 
       [id]="'value-'+person.id" 
       [(ngModel)]="person.value" 
       formControlName="personValue"/> 
     </div> 
     </form> 
    </div> 
    ", 
    directives: [REACTIVE_FORM_DIRECTIVES] 
}) 
export class App { 
    private personControl: FormGroup; 
    private persons : Person[]; 
    constructor(private _formBuilder: FormBuilder) { 
    this.persons = PERSONS; 
    this.personControl = this._formBuilder.group({ 
     personLabel : new FormControl("", 
     [ 
      Validators.required 
     ]), 
     personValue : new FormControl("", 
     [ 
      Validators.required 
     ]) 
    }); 

    } 
} 

export class Person { 
    id: number; 
    label: string; 
    value : number; 
} 

const PERSONS: Person[] = [ 
    { id: 1, label: "Person One", value : 10 }, 
    { id: 2, label: "Person Two", value : 20 }, 
    { id: 3, label: "Person Three", value : 30 } 
]; 

私はformArrayNameに見てしようとするが、それはいくつかの入力では動作しません、あなたがngModelを使用できないようです。 誰かがアイデアを持っていますか？

は、私は角2.0.0-rc.4を使用して一意である必要があります0.2.0

Answer 1

formControlName="personLabel"とformControlName="personValue"を形成しています。 personsの最後のオブジェクトが前のオブジェクトを上書きしているため、最後のラベルと値を取ります。

あなたはそれぞれにユニークなFormControlを定義する必要があります。

this.personControl = new FormGroup({ 
    personLabel0 : new FormControl('', 
    [ 
     Validators.required 
    ]), 
    personValue0 : new FormControl('', 
    [ 
     Validators.required 
    ]), 
    personLabel1 : new FormControl('', 
    [ 
     Validators.required 
    ]), 
    personValue1 : new FormControl('', 
    [ 
     Validators.required 
    ]), 
    personLabel2 : new FormControl('', 
    [ 
     Validators.required 
    ]), 
    personValue2 : new FormControl('', 
    [ 
     Validators.required 
    ]) 
}); 

そして、あなたが動的に機能してformControlNameを調整することができます。

public getName(word, i) { 
    return "person" + word + i; 
} 

そして、あなたはテンプレートからその関数を呼び出すことができます。

<div *ngFor="let p of persons; let i = index"> 
     index : {{i}}<br/> 
     label : {{p.label}}<br/> 
     value : {{p.value}}<br/> 
     <input type="text" 
      maxlength="30" 
      [id]="'label-'+p.id" 
      [(ngModel)]="p.label" 
      formControlName="{{getName('Label', i)}}" 
      placeholder="{{p.id}}"/> 
     <input type="text" 
      maxlength="30" 
      [id]="'value-'+p.id" 
      [(ngModel)]="p.value" 
      formControlName="{{getName('Value', i)}}"/> 
    </div> 

まだ経験していませんFormGroupしたがって、新しいFormControlsをFormGroup（personControl）オブジェクトに動的に送り、名前を連続的に調整する方法があるかどうかはわかりません。もしそうでなければ、「モデル駆動型」のフォームに対して助言するでしょう。

Plunker：ご返信用https://plnkr.co/edit/ERWA6GKX9VYADouPb6Z2?p=preview

Answer 2

[OK]を、ありがとう。私はformControlNameが一意でなければならないことを理解していませんでした。私は別の作成

はformControlNameに補正してplunk：ここ https://plnkr.co/edit/chiCdN5A7Vb4MCrAYaSE?p=info

はコードです：

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
     <form [formGroup]="personControl"> 
     <div *ngFor="let person of persons; let i = index"> 
      index : {{i}}<br/> 
      label : {{person.label}}<br/> 
      value : {{person.value}}<br/> 
      <input type="text" 
       maxlength="30" 
       [id]="'label-'+person.id" 
       [(ngModel)]="person.label" 
       [formControlName]="'personLabel'+person.id" /> 
      <input type="text" 
       maxlength="30" 
       [id]="'value-'+person.id" 
       [(ngModel)]="person.value" 
       [formControlName]="'personValue'+person.id" /> 
     </div> 
     </form> 
    </div> 
    `, 
    directives: [REACTIVE_FORM_DIRECTIVES] 
}) 
export class App { 
    private personControl: FormGroup; 
    private persons : Person[]; 
    constructor(private _formBuilder: FormBuilder) { 
    this.persons = PERSONS; 
    let ctrls = {}; 

    this.persons.forEach(((person: Person) => { 
     ctrls[`personLabel${person.id}`] = new FormControl('', 
     [ 
      Validators.required 
     ]); 
     ctrls[`personValue${person.id}`] = new FormControl('', 
     [ 
      Validators.required 
     ]); 
    }).bind(this)); 
    this.personControl = this._formBuilder.group(ctrls); 

    } 
} 

export class Person { 
    id: number; 
    label: string; 
    value : number; 
} 

const PERSONS: Person[] = [ 
    { id: 1, label: 'Person One', value : 10 }, 
    { id: 2, label: 'Person Two', value : 20 }, 
    { id: 3, label: 'Person Three', value : 30 } 
];