Angular2，ngModel和Forms：列表顯示不正確

Question

我有一個使用ngModel在輸入中顯示的項目數組。我在一個基本控件（必需）的表單中使用ngFor指令。該列表不能正確顯示：它始終是顯示的數組的最後一項。 如果我使用鬍鬚語法來顯示輸入外的數組，那就沒問題。如果我刪除窗體並且控件沒問題。您可以在這裏測試：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

好，感謝您的回覆。我不明白formControlName必須是唯一的。

我創建的formControlName校正另一普拉克： 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 } 
];