Angular2 : Cannot get input values of Inputs repeated by NgFor in a ngForm

Question

I'm trying to setup a form where an admin user can set the price of gas bottles. A bottle has a type, a name, and a price as follow :

export class Bottle {

  constructor(
    public typeId: string,
    public name: string,
    public price: number
  )
  { }
}

Here is the form that is displayed : an AccountID input and the list of the bottles repeated with ngFor.

<form (ngSubmit)="onSubmit()" #bottleUpdatePriceForm="ngForm" >

    <div class="form-group">
      <label for="accountId ">Account ID : </label>
      <input type="text" class="form-control" id="accoundId" name="accountId" required [(ngModel)]="accountId">
    </div>

    <div class="form-group" *ngFor="let bottle of bottleArrayToUpdate; let i = index">
      <label for="bottlePrice ">{{bottle.name}} : </label>
      <input type="text" class="form-control" id="bottlePrice" name="bottlePrice" [ngModel]="bottleArrayToUpdate[i].price">
    </div>

    <button type="submit" class="btn btn-default">Submit</button>
  </form>

I'm sending the data to my form from another component as an array of Bottles (6 actually), where their Type and Name are set, and where the Price is null.

@Input() private bottleArrayToUpdate: Bottle[];

...

onSubmit() {
    this.submitted = true;    

    console.log(this.accountId); // => Works fine
    console.log(this.bottleArrayToUpdate); // => All the prices are still null
}

Is there a way to get the input values of the repeated inputs for the bottles, and with a standard form, not a reactive form ?

I also tried with [ngModel]="bottle.price but I can't access my values either.

Thanks for your help

Answer 1

You should use the [()] notation to ensure two way binding:

  <input type="text" name="bottlePrice" [(ngModel)]="bottle.price">

Also don't use id, because this should be unique in the page, and you are using it in an *ngFor :)