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

Also, might be a possible duplicate, but I didn't find an answer in the other posts hence my question. — Alex Beugnet
– Alex Beugnet, Commented Jan 3, 2017 at 8:57

Poul Kruijt · Accepted Answer · 2017-01-03 09:00:21Z

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 :)

answered Jan 3, 2017 at 9:00

Poul Kruijt

72.3k12 gold badges153 silver badges152 bronze badges

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

2 Comments

Alex Beugnet Over a year ago

Oh my god, I was wondering why this wouldn't work... No wonders... I feel really stupid missing that. Thanks a lot ! (and good tip as well)

Poul Kruijt Over a year ago

I figured as much :), because you did use it at the accoundId

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related