Comment faire pour obtenir l'indice de l'élément modifié dans la forme angulaire de la matrice de

Je suis en utilisant Angulaire 4 avec des formes réactives. J'ai un tableau de formulaire que je suis en train de les attacher à un tableau, j'garder une trace de mon composant. Je suis à l'aide de formes réactives afin que je puisse avoir la validation, donc je ne veux pas utiliser le modèle des formulaires approche.

- Je ajouter des articles à la forme de tableau comme suit:

createFormWithModel() {
  this.orderForm = this.fb.group({
    orderNumber: [this.order.ProductBookingOrder],
    orderDate: [this.order.PurchaseOrderIssuedDate],
    lineDetailsArray: this.fb.array([])
  })

  const arrayControl = <FormArray>this.orderForm.controls['lineDetailsArray'];
  this.order.ProductBookingDetails.forEach(item => {
    let newGroup = this.fb.group({
      ProductName: [item.ProductName],
      Quantity: [item.ProductQuantity.Quantity],
      UOM: [item.ProductQuantity.UOM],
      RequestedShipDate: [item.RequestedShipDate]
    })
  })
}

Le bon de commande est bien évidemment mes formes réactives FormGroup. la commande est mon objet que je reçois de mon API et je veux mettre à jour ses valeurs, y compris les détails de ligne. Je pense que je devrais utiliser " valueChanges.s'abonner' sur chaque forum, mais je ne suis pas sûr de savoir comment obtenir l'index de l'élément qui a été modifié. Toutes les pensées?

     newGroup.valueChanges.subscribe('i want value and index some how' => {
this.order.ProductbookingDetails[index].ProductName = value.ProductName;
    });

Voici le code HTML de cette partie:

<tbody formArrayName="lineDetailsArray">
        <tr [formGroupName]="i" *ngFor="let line of orderForm.controls['lineDetailsArray'].controls; index as i">
          <td><input class="form-control" type="text" placeholder="Product Name" formControlName="ProductName" required/></td>
          <td><input class="form-control" type="number" step=".01" (focus)="$event.target.select()" placeholder="Quantity" formControlName="Quantity"/></td>
          <td><input class="form-control" readonly formControlName="UOM"></td>
          <td><date-picker formControlName="RequestedShipDate" format="L" [showClearButton]="false"></date-picker></td>
          <td><button type="button" (click)="deleteLineDetail(i)">Remove</button></td>
        </tr>
      </tbody>

pourquoi voulez-vous enregistrer chaque détails de ligne? pourquoi ne peux pas vous envoyer le modèle complet
Il y a une tonne de trucs supplémentaires-je recevoir ma commande modèle à partir de l'API, mais je ne veux que les choses dans le bon de commande modèle. Le bon de commande modèle est juste pour que je puisse mettre à jour les informations qui sont autorisés à être mis à jour par l'utilisateur. Donc je ne peux pas envoyer le bon de commande à modèle de l'API lorsque l'on fait des choses parce qu'il va être absent de toutes les autres informations. Je veux que ma commande valeurs du modèle à être mis à jour lorsque les entrées d'un formulaire de changement

OriginalL'auteur Kevin | 2017-07-13

8

Je ne voudrais pas utiliser le valueChanges ici, il serait congédié de façon excessive, spécialement si le tableau a beaucoup de valeurs.

Vous pouvez avoir un événement de changement sur chaque valeur, et il suffit de passer la valeur et l'indice, quelque chose comme
```
(keyup)="changeValue(line.controls.ProductName.value, i)"
```
Mais ce genre de combats, le but de la forme réactive.

Même si vous avez beaucoup de valeurs que vous ne voulez pas afficher dans le formulaire, et ce sont les valeurs que l'utilisateur ne peut modifier, j'aimerais simplement ajouter à la forme de toute façon que les contrôles de formulaire, rien ne dit que vous avez besoin de les montrer dans modèle!

De cette façon, si vous créez le formulaire de manière à correspondre à votre modèle order, vous avez juste à affecter directement la forme de la valeur à votre modèle sur soumettre. Je recommande fortement cette approche.

C'est ce que j'ai fait, genre de. J'ai pédalé à travers chaque formArray de contrôle et de reconstruit ma ligne-détail et réaffectés que la nouvelle liste de ma liste de commande de détails. Je vais essayer tout droit jusqu'à la transformer mon formulaire dans mon complexe tapuscrit objet maintenant. Merci!
Pas de problème! Ouais, je pense que c'est une bonne idée de simplement modifier la forme en tant que telle et de se débarrasser de devoir capturer les événements de changement. À mon avis, plus propre et plus efficace. Bonne chance, amusez-vous bien et ont un excellent week-end! 🙂

OriginalL'auteur AJT_82

export class CustomFormArray {
     public form: FormGroup;

     public get someArray(): FormArray {
          return this.form.get('someArray') as FormArray
     }

     constructor(private _fb: FormBuilder) {
          this.form = _fb.group({
               someArray: _fb.array([])
          });

          this.someArray.controls.forEach(
               control => {
                   control.valueChanges.subscribe(
                        () => {
                       console.log(this.someArray.controls.indexOf(control)) //logs index of changed item in form array
                        }
                   )
               }
          )
     }
}

Alors que ce code peut répondre à la question, en fournissant plus de contexte sur comment et/ou pourquoi il résout le problème serait d'améliorer la réponse à long terme de valeur. Veuillez lire pourquoi il n'est pas sage de code post-seules réponses

OriginalL'auteur Ivan Tkachyshyn

0

Vous pouvez créer un composant pour les éléments que vous souhaitez conserver dans votre tableau de formulaire. Pour chaque mise à jour, supprimer etc. vous émettez un événement pour le composant parent et l'index, vous pouvez émettre à l'événement que vous lierez sur la dans le composant parent ou vous avez l'indice du composant parent dans le modèle de trop l'utiliser comme entrée supplémentaire paramètre pour la fonction à utiliser pour lier sur l'événement de modification de l'enfant du composant.

Lisez cet article et vous comprendrez ce que je veux dire:

https://medium.com/spektrakel-blog/angular2-building-nested-reactive-forms-7978ecd145e4

OriginalL'auteur Gerros

Vous devez vous connecter pour publier un commentaire.