Angular 2 Formular mit Array von Objekteingaben

Question

Ich baue eine Rechnungs App, um Angular2 zu lernen. Das Problem, das ich treffe, ist, wie man die Werbebuchungskomponente erstellt, in der eine Zeile 3 Eingaben enthält, die von einem Objekt in einem Array von Werbebuchungen stammen und an dieses binden sollen.

In Winkel 1, kann ich dies leicht erreichen, indem Sie eine ng-form Direktive zu den Container der Eingänge hinzufügen. Was ist hier gleich?

Hier ist mein Code:

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> 

Komponente:

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

Das hier Problem in der Eingangsname wird, verwenden Sie in Ihrem Fall name = „description ", was hier passiert, ist, dass immer die form.description.value mit der letzten Beschreibung updatet wird. In Ihrem Fall haben Sie Array von Beschreibungen, müssen Sie Array von form.description haben [i] .Wert

So ist die Korrektur Änderung Beschreibung einzigartig zu sein.

name = "description _ {{i}}"

diese Wiederholung für jeden Eingang in einem ngFor. Für dieses Problem Fixierung können Sie dies tun:

<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> 

Sie Ihr Beispiel arbeitet hier sehen kann: https://plnkr.co/edit/orldGCSYDUtlxzMFsVjL?p=preview

Meine Empfehlung ist, arbeitet immer mit ReactiveForms (Model Forms Driven), vielleicht den einzigen Fall, werde ich Verwenden Sie FormsModule (Template Driven Forms) für kleine Formulare. Es ist einfacher und es ist besser für Arrays von Daten.

Hoffe, dass es Ihr Problem gelöst hat.