Angular2: невозможно получить входные значения входов, повторяемых NgFor в ngForm

Я пытаюсь настроить форму, в которой пользователь-администратор может устанавливать цену на газовые баллоны. Бутылка имеет тип, имя и цену следующим образом:

export class Bottle {

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

Вот форма, которая отображается: ввод AccountID и список бутылок, повторенный с помощью 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>

Я отправляю данные в свою форму из другого компонента в виде массива бутылок (на самом деле 6), где установлены их Тип и Имя, и где Цена равна нулю.

@Input() private bottleArrayToUpdate: Bottle[];

...

onSubmit() {
    this.submitted = true;    

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

Есть ли способ получить входные значения повторяющихся входов для бутылок со стандартной формой, а не с реактивной формой?

Я также пытался использовать [ngModel]="bottle.price, но тоже не могу получить доступ к своим значениям.

Спасибо за вашу помощь


person Alex Beugnet    schedule 03.01.2017    source источник
comment
Кроме того, возможно, это дубликат, но я не нашел ответа в других сообщениях, поэтому и задал свой вопрос.   -  person Alex Beugnet    schedule 03.01.2017


Ответы (1)


Вы должны использовать нотацию [()], чтобы обеспечить двустороннюю привязку:

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

Также не используйте id, потому что это должно быть уникальным на странице, а вы используете его в *ngFor :)

person Poul Kruijt    schedule 03.01.2017
comment
Боже мой, мне было интересно, почему это не сработает... Ничего удивительного... Я чувствую себя очень глупо, пропустив это. Большое спасибо ! (и хороший совет) - person Alex Beugnet; 03.01.2017
comment
Я так и думал :), потому что ты использовал его в accoundId - person Poul Kruijt; 03.01.2017