ngForのAngular2バインド配列

Question

私はangular2を使用しています。私のフォームでは、通常、モデルクラスを作成し、オブジェクトをフォームにバインドしてからthis.myObject経由でアクセスします。

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

以降

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

---

を私のデータを取得し、私は*ngForを使用してデータの配列を示した位置に今の私、そしてクリックがそれらのすべてを取得するために提出するとき、私はしたいです特定のクラスの配列として返します。

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

バインディングを使用して、データが入力に挿入された刻印オブジェクトをすべての反復で取得できるようにします。

Answer 1

FormArrayクラスを使用して、入力を配列にバインドできます。私はあなたのための簡単なデモを下に書きました。 ValidatorをFormControlにバインドできるように、FormBuilderを使用してフォームを設定することをお勧めします。単にモデルオブジェクトをFormGroup.valueで取得できます。

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('')); 
    } 
}