オブジェクト入力の配列を持つ角度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

ここでの問題は、あなたのケースでは、名前=「記述を使用している、入力された名前であります"、ここで起こっているのは、常に最後の記述でform.description.valueをアップアップしようとしているということです。あなたの場合は、説明の配列を持って、あなたはform.description [i] .valueの配列を持つ必要があります

したがって、修正は一意になるように変更の説明です。

名= "説明_ {{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（テンプレートドリブンフォーム）を使用するのは小規模です。データの配列を処理するのが簡単で、その方が優れています。

あなたの問題を解決したいと考えています。