角度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.

在角度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.

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