it-swarm.com.de

Angular 2-Template-gesteuertes Formular mit Eingaben für ngFor

Ist es möglich, Eingabefelder mit einem ngFor in einem vorlagengesteuerten Formular zu erstellen und etwas wie # name = "ngModel" zu verwenden, um name.valid in einem anderen Tag verwenden zu können?

Im Moment haben wir eine dynamische Liste von Produkten mit einem Mengenfeld und einem Button zum Einkaufswagen in einer Tabelle. Ich möchte das Ganze zu einem Formular machen, das am Ende mit einer Schaltfläche "Alles hinzufügen" versehen ist:

<form #form="ngForm">
    <div *ngFor="item in items">
        <input name="product-{{item.id}}"
               [(ngModel)]="item.qty"
               #????="ngModel"
               validateQuantity>
        <button (click)="addItemToCart(item)"
                [disabled]="!????.valid">Add to cart</button>
    </div>
    <button (click)="addAll()"
            [disabled]="!form.valid">Add all</button>
</form>

Wie kann ich jedoch einen neuen Variablennamen pro Zeile für das ngModel generieren?

14
Jeppz

Das ist nicht nötig, einfach so machen:

<form #form="ngForm">
    <div *ngFor="item in items">
        <input name="product-{{item.id}}"
               [(ngModel)]="item.qty"
               validateQuantity
               #qtyInput>
        <button (click)="addItemToCart(item)"
                [disabled]="!qtyInput.valid">Add to cart</button>
    </div>
    <button (click)="addAll()"
            [disabled]="!form.valid">Add all</button>
</form>

Hier ist Angulars Teil. :)

22
mxii

Die Antwort mxii funktioniert erwartungsgemäß für Formularelemente, die dynamisch von ngFor erstellt werden. Wenn Sie jedoch ngForm nicht verwenden, werden Sie eine Liste von Elementen durchlaufen, die über eine unabhängige Entität verfügen (z. B. eine Kommentarliste) , und der Benutzer sollte in der Lage sein, jeden Kommentar zu beantworten.) Sie können Vorlagen-Referenzvariablen verwenden, mit denen Sie das Input-Element problemlos abrufen und verwenden können.

So kannst du es machen:

// Your template
<div *ngFor="item in items">
  <!-- Your input -->
  <input #itemInput type="number">

  <button (click)="addItemToCart(itemInput.value)"
          [disabled]="!itemInput.value">Add to cart</button>
</div>

Es gibt einen Verweis auf die dem Eingabefeld zugewiesene Variable, und hier im obigen Beispiel haben wir itemInput.value übergeben, der der Wert des Eingabefelds ist. Es kann Fälle geben, in denen Sie einen Verweis auf das Eingabefeld benötigen (nehmen Sie an, dass der Wert entfernt wird, wenn Sie die Daten erhalten haben). Sie können einfach die Variable itemInput übergeben, die ein Typ von HTMLInputElement ist, und auf deren Daten zugreifen.

0
M98

sie müssen FormModule zu Ihrer app.module.ts hinzufügen, um die bidirektionale Bindung zu gewährleisten, zumindest in neueren Versionen von angle 

Angular 4 - "Kann nicht an 'ngModel' binden, da es keine bekannte Eigenschaft von 'input' ist." Error

0
gischy