angular [(ngModel)] inside *ngFor

Question

how come all the input boxes are binded after I try to add user?

https://stackblitz.com/edit/angular-4e65ne

I am assigning them to different elements in the array.

Answer 1

You are adding the same user object to your array multiple times. Also unnecessarily complicated, you can reduce it to this:

You can reduce your AppComponent to

import { Component } from '@angular/core';
import { NewUser } from './user.model';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  public user1 = Array<NewUser>();

  addUser() {
    this.user1.push(<NewUser>{
      userId: 'userId1',
      reason: 'reason1'
    });
  }
}

Then your binding works just fine:

<div class="input-group-prepend">
    <span class="input-group-text addUser" (click)="addUser()">+ User</span>
</div>

<div *ngFor="let i of user1; let index = index"> 
  <div class="input-group mb-3" >

    <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">User Id</span>
    </div>
    <input type="text" class="form-control" name="userid-{{index}}" [(ngModel)]="user1[index].userId"> {{index}}
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon1">Reason</span>
    </div>
      <input type="text" class="form-control" name="reason-{{index}}" [(ngModel)]="user1[index].reason">

    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon1" (click)="removeUserId(index)"><i class="fa fa-trash" aria-hidden="true"></i></span>
    </div>
  </div>
</div>

Stackblitz: https://stackblitz.com/edit/angular-bamrwa?file=src%2Fapp%2Fapp.component.ts