带有对象输入数组的 Angular 2 形式

Question

我正在构建一个发票应用程序来学习 Angular2。我遇到的问题是如何构建行项目组件，其中一行包含 3 个输入，这些输入应该来自并绑定到行项目数组中的对象。

在角度 1 中，我可以通过向输入容器添加 ng-form 指令来轻松实现此目的。这里的等价物是什么？

这是我的代码：

HTML：

<form name="form" ng-submit="$ctrl.submit(form)" novalidate>

<!-- some more code -->

<ul class="list invoice-table__body">
  <li *ngFor="let item of model.lineItems; let i = index">
    <input
      type="text"
      name="description"
      class="col-sm-8"
      [(ngModel)]="item.description">

    <input
      type="number"
      name="quantity"
      class="col-sm-2"
      [(ngModel)]="item.quantity">

    <input
      type="number"
      name="total"
      class="col-sm-2"
      [(ngModel)]="item.total">
  </li>
</ul>

<!-- some more code -->

</form>

组件：

import { Component } from '@angular/core';
import { Invoice } from './invoice.model';
import { InvoiceLineItems } from './invoice-line-item.model';

@Component({
  selector: 'create-invoice',
  templateUrl: 'create-invoice/create-invoice.html'
})
export class CreateInvoiceComponent {
  model: Invoice = new Invoice(
    85,
    'CAD',
    null,
    [ // lineItems
      new InvoiceLineItems('Web development for BAnQ'),
      new InvoiceLineItems('Sept 1 to 3', 14, 910),
      new InvoiceLineItems('Sept 5 to 10', 34, 5293),
      new InvoiceLineItems('Sept 11 to 20', 24, 5293),
      new InvoiceLineItems('Sept 21 to 38', 11, 2493),
    ],
    13989,
    100,
    200,
    15000,
    '',
    null,
    '$'
  );

  getTotal(): number {
    return this.model.lineItems.reduce(
      (a, b): number => a + (isNaN(b.total) ? 0 : b.total),
      0);
  }
}

Answer 1

这里的问题在于输入名称，在您的情况下，您使用的是 name = "description"，这里发生的情况是总是要使用最后一个描述更新 form.description.value。在你的情况下，你有描述数组，你需要有 form.description[i].value

数组

所以解决方法是将描述更改为唯一。

name="description_{{i}}"

对 ngFor 中的每个输入重复此操作。 要解决此问题，您可以这样做：

<ul class="list invoice-table__body">
  <li *ngFor="let item of invoice.lineItems; let i = index">

    <input
      type="text"
      name="description_{{i}}"
      class="col-sm-8"
      [(ngModel)]="invoice.lineItems[i].description">

    <input
      type="number"
      name="quantity_{{i}}"
      class="col-sm-2"
      [(ngModel)]="invoice.lineItems[i].quantity">

    <input
      type="number"
      name="total_{{i}}"
      class="col-sm-2"
      [(ngModel)]="invoice.lineItems[i].total">
  </li>
</ul>

您可以在这里看到您的示例： https://plnkr.co/edit/orldGCSYDUtlxzMFsVjL?p=preview

我的建议始终适用于 ReactiveForms（模型驱动表单），也许我将使用 FormsModule（模板驱动表单）的唯一情况是用于小型表单。它更容易，更适合处理数据数组。

希望它能解决您的问题。