Angulaire 2 modèle de moteur formulaire avec ngFor entrées

Est-il possible de créer des champs de saisie avec un ngFor dans un modèle de moteur formulaire et d'utiliser quelque chose comme #nom="ngModel" pour pouvoir l'utiliser nom.valide dans un autre tag?

Droit maintenant, nous avons une liste dynamique de produits avec une quantité de champ et un bouton ajouter au panier dans un tableau. Je veux rendre la chose un formulaire avec un bouton ajouter tout à 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 créer un nouveau nom de variable par ligne pour le ngModel?

Double Possible de Angulaire 2+ et Observables: ne Peut pas se lier à 'ngModel', car il n'est pas déjà connu bien des 'select'
C'est définitivement une question similaire, mais sur les différentes parties, je ne connaissais pas la syntaxe pour faire mon modèle de travail, alors que cette question avait la syntaxe correcte mais manquait un module.

OriginalL'auteur Jeppz | 2016-09-21

  1. 23

    Il n'y a pas besoin pour cela, il suffit de faire comme ceci:

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

    Son Angulaire de la partie ici. 🙂

    Attendre quoi? J'ai essayé et ça n'a pas fonctionné mais tout à coup, il ne, doivent avoir fait quelques fautes de frappe ou erreur.. Merci en tout cas!
    J'obtiens l'erreur : Si ngModel est utilisé à l'intérieur d'une balise de formulaire, soit le nom de l'attribut doit être défini ou le formulaire de contrôle doit être défini comme "autonome" dans ngModelOptions. lorsque j'utilise nom={{item.name}}. mais quand j'ajoute de la chaîne d'attr, ça marche!!!!! >> nom="someTxt{{item.name}}" !!!! mais j'ai besoin du nom de l'égalité de point.nom de la valeur. pouvez-vous m'aider??

    OriginalL'auteur mxii

  2. 1

    La mxii réponse fonctionne comme prévu pour les éléments de formulaire créé dynamiquement par ngFor, mais si vous n'allez pas utiliser ngForm, et vous êtes itérer sur une liste d'éléments qui ont une entité indépendante (comme une liste de commentaires, et l'utilisateur doit être en mesure de répondre à chaque commentaire), vous pouvez utiliser modèle de référence des variables qui vous donne la capacité d'obtenir et de travailler avec l'élément d'Entrée facilement.

    Ici est de savoir 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 assignée à la zone de saisie, et ici, dans l'exemple ci-dessus nous avons passé itemInput.value qui sera la valeur du champ de saisie; Il pourrait y avoir des cas que vous avez besoin d'une référence pour le champ de saisie (disons que vous allez retirer de sa valeur lorsque vous avez obtenu les données), vous pouvez simplement passer le itemInput et qui est un type de HTMLInputElement et d'accéder à ses données.

    OriginalL'auteur M98

  3. 0

    vous devez ajouter FormModule à votre application.le module.ts pour obtenir 2 voies de liaison de travail, au moins dans les versions plus récentes de angulaire

    Angulaire 4 - "ne Peut pas se lier à 'ngModel', car il n'est pas connu de la propriété de 'entrée' " erreur

    OriginalL'auteur gischy