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>
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
Vous devez vous connecter pour publier un commentaire.
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
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.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
OriginalL'auteur Ivan Tkachyshyn
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