2016-08-09 140 views
2

Ich benutze angular2 und in meinen Formen ich normalerweise eine Modellklasse erstellen und binden mein Objekt mit der Form dann Zugriff über this.myObject.Angular2 Bind Array mit ngFor

<div class="form-group "> 
<label class="col-md-3 control-label">Label</label> 
<div class="col-md-6"> 
    <input type="text" class="form-control" [(ngModel)]="diplome.label" name="label"> 
</div> 
</div> 

Und meine Daten später

private diplome = new Diplome(); 
let myData = this.diplome; 

Ich bin jetzt auf einer Position, wenn ich ein Array von Daten zeigen, *ngFor verwenden, und ich möchte, wenn Sie auf einreichen, alle von ihnen zu bekommen als ein Array einer bestimmten Klasse.

... 
<tr *ngFor="let inscription of inscriptions"> 
<td> 
    <span *ngIf="inscription._etudiant">{{ inscription._etudiant.label }}</span> 
</td> 
<td> 
    <div class="form-group "> 
    <div class="col-md-6"> 
    <input type="number" class="form-control" name="note"> 
    </div> 
    </div> 
</td> 
</tr> 
... 

Ich möchte in jeder Iteration des Inschrift-Objekts zu erhalten, um mit den Daten in den Eingang Bindung mit eingefügt werden.

+0

genau wo möchten Sie es bekommen? – micronyks

+0

In meinem component.ts nach dem Brennen senden klicken Sie auf die Schaltfläche. – elhoucine

Antwort

4

Sie können die Klasse FormArray verwenden, um Ihre Eingaben an ein Array zu binden. Ich habe dir unten eine kurze Demo geschrieben. Es ist besser, FormBuilder zum Einrichten Ihrer Formulare zu verwenden, da Sie Validatoren an Ihre FormControls binden können, und Sie können das Modellobjekt einfach mit FormGroup.value abrufen.

import { Component } from '@angular/core'; 
import { FormBuilder, FormGroup } from '@angular/forms'; 

@Component({ 
    selector: 'ExampleForm', 
    template: `<form [formGroup]="formGroup"> 
       <div formArrayName="formArray"> 
       <div *ngFor="let control of formGroup.controls.formArray.controls; let i=index"> 
        <input type="text" formControlName="{{i}}"> 
       </div> 
       </div> 
       <button (click)="addInput()">Add Input</button> 
      </form> 
      <pre>{{formGroup.value | json}}</pre> ` 
}) 
export class ExampleForm { 
    private formGroup: FormGroup; 

    constructor(private fb: FormBuilder) { 
    this.formGroup = this.fb.group({ 
     formArray: this.fb.array([ 
     this.fb.control('') 
     ]) 
    }); 
    } 

    addInput() { 
    this.formGroup.controls.formArray.push(this.fb.control('')); 
    } 
} 
+0

Wenn ich das tue, sagt der Typescript-Compiler 'Eigenschaft FormArray existiert nicht auf Typ ...'. Funktioniert das wirklich für dich? Ich kann den Code ausführen, und wenn ich die 'this.formGroup' console.log anmelde, bekomme ich das Objekt, das' formArray' enthält, da dies zur Laufzeit korrekt ist. Wie löst man das? –

+0

Danke Mann. Dieses Beispiel hat mir sehr geholfen. –