web-dev-qa-db-fra.com

Formulaire basé sur un modèle angulaire 2 avec des entrées ngFor

Est-il possible de créer des champs de saisie avec ngFor dans un formulaire basé sur des modèles et d'utiliser quelque chose comme # name = "ngModel" pour pouvoir utiliser name.valid dans une autre balise?

Actuellement, nous avons une liste dynamique de produits avec un champ de quantité et un bouton Ajouter au panier dans un tableau. Je veux faire du tout un formulaire avec un bouton Tout ajouter à la fin, comme ceci:

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

Mais comment puis-je générer un nouveau nom de variable par ligne pour ngModel?

formsangularngfor
14
Jeppz

Il n'y a pas besoin de ça, faites-le comme ça:

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

Sa part angulaire ici. :)

22
mxii

La réponse mxii fonctionne comme prévu pour les éléments de formulaire créés dynamiquement par ngFor, mais si vous n'allez pas utiliser ngForm, et que vous effectuez une itération sur une liste d'éléments comportant une entité indépendante (comme une liste de commentaires). (et l’utilisateur devrait pouvoir répondre à chaque commentaire), vous pouvez utiliser les variables de référence du modèle qui vous permettent d’obtenir et de travailler facilement avec l’élément Input.

Voici comment vous pouvez le faire:

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

Il donne une référence à la variable affectée au champ de saisie et dans l'exemple ci-dessus, nous avons passé itemInput.value qui sera la valeur du champ de saisie; Il peut arriver que vous ayez besoin d'une référence au champ de saisie (disons que vous allez supprimer sa valeur lorsque vous avez obtenu les données), vous pouvez simplement passer la itemInput et définir un type de HTMLInputElement et accéder à ses données.

0
M98

vous devez ajouter FormModule à votre app.module.ts pour que la liaison bidirectionnelle fonctionne, au moins dans les nouvelles versions de angular 

Angular 4 - "Impossible de se lier à 'ngModel' car ce n'est pas une propriété connue de 'input'" error

0
gischy