Kendo: insérez un FormGroup en haut dans un FormArray

Question

Énoncé du problème:

Dans la démonstration ci-dessous de stackblitz, je suis capable d'insérer dynamiquement le FormGroup au début de la grille en cliquant sur le bouton Add et en déclenchant le (blur) événement d'un contrôle pour mettre à jour la valeur d'un autre contrôle partageant le même rowIndex. Maintenant, le problème est de savoir si j'ai inséré plusieurs formGroups et déclenché sur (blur) événement sur l'un des FormGroups nouvellement ajoutés, il met à jour la valeur des autres contrôles ainsi que les différents rowIndex.

Étapes pour reproduire le problème:

• Ouvrez le lien de démonstration ci-dessous.
• Ajoutez plusieurs lignes (2 lignes) en cliquant sur le bouton Ajouter.
• Entrez la valeur dans le champ de nom de la deuxième ligne nouvellement ajoutée et concentrez-vous.
• Il met à jour le champ d'âge dans la ligne nouvellement ajoutée au lieu de seulement dans la deuxième.

Démo Stackblitz: https://stackblitz.com/edit/angular-oitz5j-4uezqr

Exigence:

Tabulez sur n'importe quel champ de nom d'une ligne particulière, le champ Âge sur la même ligne doit afficher un nombre aléatoire sans impact sur les autres lignes.

Ce que j'ai essayé jusqu'à présent?

• J'ai essayé d'utiliser la méthode Array nshift () mais j'obtiens une erreur

  La propriété 'unshift' n'existe pas sur le type 'FormArray'

• J'ai essayé d'utiliser la méthode FormArray.insert () . Cela fonctionnera si nous voulons ajouter un FormGroup à un index spécifique. Mais il ne parvient pas à insérer plusieurs FormGroups en haut de FormArray dynamiquement.

Mise à jour: Le problème ci-dessus fonctionne correctement sans Kendo Grid. Veuillez vérifier la démo ci-dessous.

Démo: https://stackblitz.com/edit/angular-oitz5j-2a31gs

Problèmes liés à github/stackoverflow:

https://github.com/angular/angular/issues/16322

Angulaire - Index spécifique à Push de tableau de formes

Remarque: Si nous allons ajouter les contrôles à la fin de la grille, cela fonctionne comme un champion. Veuillez vérifier la démo ci-dessous qui fonctionne bien avec l'ajout des commandes au dernier.

Démo: https://stackblitz.com/edit/angular-oitz5j-aszrjq

Answer 1

le problème est la grille de Kendo. vous marchez sur l'index 0 encore et encore de sa source de données et qui sait ce qu'il fera en interne pour afficher les données. mais ce qui est vrai, c'est qu'il n'utilise pas la valeur du tableau de formulaires. si vous sortez votre tableau de grille de kendo fonctionnera bien ou si vous ajoutez à la fin de votre méthode onFocusOut un journal de console console.log(this.createForm.get("items").value); vous verrez que la valeur du formArray est correcte.

Si vous avez besoin d'utiliser la grille de kendo oui ou oui. lire le doc suivant:

https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-reactive-forms/

les exemples que je vois montrent que vous ne pouvez pas gérer en externe le formulaire. vous devez utiliser les méthodes fournies par la grille de kendo. parce que la grille de kendo n'affiche pas vraiment la valeur fromArray