Я пытаюсь настроить форму, в которой пользователь-администратор может устанавливать цену на газовые баллоны. Бутылка имеет тип, имя и цену следующим образом:
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
, но тоже не могу получить доступ к своим значениям.
Спасибо за вашу помощь