Binding to an array of objects inside an ngFor, binds all inputs together

Question

I'm trying to create a registration form for an array of persons with Angular. Persons are in an array of Person objects. The problem is that all input fields are bind together! I did this with a String[] and it works like a charm but when using Person class it misbehaves!

This is my component:

Stackblitz.com: https://stackblitz.com/edit/angular-m5xzds

TS file:

import { Component } from '@angular/core';

class Person {
  constructor(
    firstname: string,
    lastname: string) { }
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  array = Array;
  count = 3;
  persons: Person[];
  ngOnInit() {
    this.persons = new Array<Person>(5).fill({});
  }
}

Template:

count: <input type="number" name="count" [(ngModel)]="count">
<div>Persons:</div>

<div *ngFor="let item of array(count).fill(0); index as i">
  <form>
<input [(ngModel)]="persons[i].firstname" type="text" class="form-control" name="name_{{i}}">

  </form>
</div>
{{persons|json}}

Sam · Answer 1 · 2019-08-14T16:18:00.450

2

*ngFor can loop over your list of persons directly, i feel like you could simplify this by doing the following.

  <form>
<div *ngFor="let person of persons; let i = index">
<input *ngIf="i < count" [(ngModel)]="person.firstname" type="text" class="form-control" name="{{person.firstname}}">  
</div>
</form>

edited Aug 14 '19 at 16:18

answered Aug 14 '19 at 14:51

Sam

1,736
8
15

There should only be one form tag – SGalea Aug 14 '19 at 14:55
name attribute cannot be {{person.name}}.But beside that, your code is not working. . Check the new stackblitz: stackblitz.com/edit/rostamiani-angular-foreach-answer – rostamiani Aug 14 '19 at 15:38
Thanks, Good idea. but the solution is what @hakimovic said. – rostamiani Aug 14 '19 at 16:20

captain hak · Accepted Answer · 2019-08-14T16:37:51.980

1

the Array.fill method passes the reference so it's basically the same object in the five places of your persons array, it was working with string array because string are immutable and the array is full of 'different' strings. See this question.

So you can use a map function to solve that as in the question or separate the ngmodel and the ngmodelchange see example here: stackblitz example

edited Aug 14 '19 at 16:37

answered Aug 14 '19 at 15:28

captain hak

742
6
20

Binding to an array of objects inside an ngFor, binds all inputs together

2 Answers2