Angular2 bind array with ngFor

Question

I am using angular2 and in my forms I usually create a model class and bind my object with the form then access is via 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>

And get my data later

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

I am now on a position when I show an array of data using *ngFor, and I want when clicking on submit to get all of them as an array of a specific class.

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

I want to be able to get in every iteration the inscription object with the data being inserted into the input using binding.

exactly where do you want to get it?

micronyks
– micronyks

2016-08-09 15:50:51 +00:00
Commented Aug 9, 2016 at 15:50 — micronyks
– micronyks, Commented Aug 9, 2016 at 15:50
Inside my component.ts after firing submit click button.

elhoucine
– elhoucine

2016-08-09 15:52:41 +00:00
Commented Aug 9, 2016 at 15:52 — elhoucine
– elhoucine, Commented Aug 9, 2016 at 15:52

AJLiu · Accepted Answer · 2016-08-09 22:33:06Z

4

You can try using FormArray class to bind your inputs to an array. I wrote out a quick demo for you below. It's better to use FormBuilder to set up your forms as you can bind Validators to your FormControls, and you can simply get the model object with 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(''));
  }
}

answered Aug 9, 2016 at 22:33

AJLiu

851 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Patrick Hillert Over a year ago

When I do that, the typescript compiler says Property formArray does not exist on type .... Does this really work for you? I can run the code, and when I console.log the this.formGroup I get the object containing formArray as this is correct at runtime. How to solve that?

Collectives™ on Stack Overflow

Angular2 bind array with ngFor

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related