Question

我试图设置一个管理员用户可以设置气瓶价格的表单。瓶子的类型，名称和价格如下：

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>

我将数据从另一个组件发送到我的表单，作为一个Bottles数组（实际上是6个），其中设置了 Type 和 Name ，并且其中价格为空。

@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，但我也无法访问我的值。

感谢您的帮助

Answer 1

您应该使用[()]表示法来确保双向绑定：

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

另外请勿使用id，因为这在页面中应该是唯一的，并且您在*ngFor中使用它：）

Angular2：无法在ngForm中获取NgFor重复输入的输入值

1 个答案: