带有对象输入数组的 Angular 2 形式 [英] Angular 2 form with array of object inputs

问题描述

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

I'm building an invoicing app to learn Angular2. The issue I am hitting is how to build the line item component where a line contains 3 inputs that should come from and bind to an object in an array of line item.

在 angular 1 中，我可以通过向输入的容器添加 ng-form 指令来轻松实现这一点.这里的等价物是什么?

In angular 1, I can easily achieve this by adding an ng-form directive to the container of the inputs. What is the equivalent here?

这是我的代码:

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);
  }
}

推荐答案

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

The problem here is in the input name, in your case you are using name = "description", what is happening here is that is always is going to upadte the form.description.value with the last description. In your case you have array of descriptions, you need to have array of form.description[i].value

所以修复是将描述更改为唯一.

So the fix is change description to be unique.

name="description_{{i}}"

name="description_{{i}}"

对 ngFor 中的每个输入重复此操作.要解决此问题，您可以执行以下操作:

Repeat this for every input inside a ngFor. For fixing this issue you can do this:

<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

you can see your example working here: https://plnkr.co/edit/orldGCSYDUtlxzMFsVjL?p=preview

我的建议始终适用于 ReactiveForms(模型驱动表单)，也许我将使用 FormsModule(模板驱动表单)的唯一情况是针对小型表单.它更容易并且更适合处理数据数组.

My recommendation is always works with ReactiveForms (Model Driven Forms), maybe the only case i will use FormsModule (Template Driven Forms) is for small form. Its Easier and its better for doing arrays of data.

希望它解决了您的问题.

Hope its solved your issue.

这篇关于带有对象输入数组的 Angular 2 形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！