Angular2, ngModel und Forms: Liste wird nicht korrekt angezeigt

Question

Ich habe ein Array von Elementen in Eingaben mit ngModel angezeigt. Ich benutze eine ngFor-Anweisung in einem Formular mit einer grundlegenden Kontrolle (erforderlich). Die Liste wird nicht korrekt angezeigt: Sie ist immer das letzte Element des Arrays, das angezeigt wird. Wenn ich die Schnurrbart-Syntax verwende, um das Array außerhalb der Eingänge anzuzeigen, ist es in Ordnung. Wenn ich das Formular und die Kontrolle entferne, ist es in Ordnung. Sie können es hier testen: plunker. Hier ist der Code:

@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 } 
]; 

Ich versuche, einen Blick in formArrayName zu haben, aber es scheint, dass es nicht mit mehreren Eingängen funktioniert und Sie können nicht ngModel verwenden. Hat jemand eine Idee?

Ich benutze Winkel 2.0.0-rc.4 und bildet 0.2.0

Answer 1

formControlName="personLabel" und formControlName="personValue" eindeutig sein muss. Sie nehmen die letzte Bezeichnung und den letzten Wert, weil das letzte Objekt in persons die vorherigen überschreibt.

Sie müssen einen eindeutigen FormControl für jede definieren:

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 
    ]) 
}); 

Und Sie können dynamisch formControlName mit einer Funktion einstellen:

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

Und Sie können diese Funktion aus der Vorlage nennen:

<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> 

Ich bin noch nicht inerfahrenso weiß ich nicht, ob es eine Möglichkeit gibt, neue FormControls auf das FormGroup (personControl) Objekt dynamisch zu schieben, ständig die Namen anzupassen. Wenn nicht, würde man von den "modellgetriebenen" Formen abraten.

Plunker: https://plnkr.co/edit/ERWA6GKX9VYADouPb6Z2?p=preview

Answer 2

Ok, vielen Dank für Ihre Antwort. Ich habe nicht verstanden, dass der formControlName eindeutig sein muss.

ich erstellen Sie eine andere zupft mit der Korrektur auf dem formControlName: https://plnkr.co/edit/chiCdN5A7Vb4MCrAYaSE?p=info

Hier ist der Code:

@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 } 
];