使用ngFor

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类将输入绑定到数组。我在下面为你写了一个快速演示。最好使用FormBuilder来设置表单，因为您可以将Validators绑定到FormControls，并且只需使用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(''));
  }
}