Discussion :

[corentinJacob]

Bonjour à toutes et à tous. Je rencontre un petit soucis sous Angular 10.
j'aimerais que ma checkbox reste check en fonction d'une value de mon backend.
J'ai donc 9 div généré dynamiquement avec une *ngFor et ces 9 div sont généré à partir
d'une enum de 9 type différent. Lorsque que je valide ma checkbox j'ai accès à des inputs (ils changent selon les types).
J'arrive à get les values dans mes inputs, pas de soucis à se niveau là. J'arrive également à set le bon type associé à ma checkbox,
grâce à un event qui se base sur mon index (0 à 8).
J'aimerais donc, si mon type est bien en bdd, que ma checkbox soit coché (du coup ma div serait ouverte).
J'ai utilisé le [checked] de angular , mais lorsque je l'utilise, il me check toutes mes checkbox sauf la première alors que c'est la
seul qui possède une value dans mon exemple :').

je get mes données en utilisant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
this.goodsReceiptProtocol.litigations

Le code qui me donne accès à mes types :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
this.litigationconfig[i].type

En vous remerciant par avance,
Je vous souhaite une agréable journée !

[krakatoa]

hello man,

sans un peu plus de code difficile de te répondre

[corentinJacob]

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div class="row" *ngFor="let litigation of litigations['control']; let index = index">
<mat-checkbox change="setType($event)>
{{litigationConfig[index].label}}
 
<div class="row">
<input matInput  formControlName="reference">Reference</input>
</div>
</mat-checkbox>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
setType(event, index)
if (event.checked)
this.litigationConfig[index].get('type').setValue(this.litigationConfig[index].type)

Comme dis, ce code est good, il set bien mon type quand j'edit mon formulaire. J'ai par exemple la value dans mon champ reférence. Mais je vois pas bien le principe pour dire à la checkbox de rester check.
Je suppose que je devrais faire quelques chose comme le setType mais en version isChecked.
Mais je vois pas du tout quoi appeler :/.

Merci de ton retour!

[krakatoa]

déjà ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
....  change="setType($event)>          // index ??????
 
setType(event, index)

[corentinJacob]

J'oublié de mettez le i pour l'index dans mon explication. Mais je l'avais dans mon code. Mais le problème ne vient pas d'ici. La je set mon type. Et cest fonctionnelle. Donc 0 soucis à ce niveau.

[dukoid]

je dois avouer que je ne comprends pas exactement quel est le problème donc je ne peux t'aider

[corentinJacob]

Je veux que la checkbox reste check si un type est présent. J'ai 9 checkbox généré automatiquement avec un *ngFor. Si par exemple jarrive sur ma page ou les checkbox sont présente. J'aimerais que si un litige est présent, la checkbox soit check.
J'ai une entité parent. Et dans cette entité j'ai une entité litige à l'intérieur. (Sous forme d'array). Et un litige peut posséder 9 objects. Qui sont crée à partir de ma checkbox. Checkbox qui set un type à mon object.
Du coup j'ai accès à ma liste. Et j'aimerais que si le type 0 qui est égal à "MissingLabel" que la checkbox portant ce label soit check. Et ainsi de suite pour chaque checkbox.

[dukoid]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
setType(event, index) {
 if (event.checked) {
   this.litigationConfig[index].get('type').setValue(this.litigationConfig[index].type)
 } else {
   this.litigationConfig[index].get('type').setValue('');       // j'ai mis ''   si ce n'est pas coché, à toi de voir
   // ou    this.litigationConfig[index].get('type').setValue(null); 
 }
}

peux tu me montrer le .ts

[corentinJacob]

Mais enfaite cette partie de code fonctionne parfaitement. Tu as rajouté la partie pour ne rien set si la checkbox est vide, mais mon problème n'est pas là.
Je veux que la checkbox reste check si un type est présent en back.
Mes checkbox sont crée dynamiquement à partir de l'index que je parcours. Mon est soucis est que si je lui dis que :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
check: boolean;
 
isChecked () {
if (this.goodsReceiptProtocol.litigations !== null) {
   this.check = true; 
}
}

Sauf que en faisais ça je check absolument toutes mes checkbox.
Du coup je dois faire un traitement sur chaque type, donc mes 9 types différent.
Rechercher leur valeur, et dire que si le type est !== de null alors à ce moment là,
je check m'a checkbox.

Actuellement le set de type en cochant m'a checkbox est good, j'ai bien le retour de 0 à 8 en bdd si la checkbox en question est set.
Mais au rechargement de la page, elle ne l'est plus car actuellement le check est juste un event qui permet à un instant T de set la value
quand je save mon form.

Ce qui rend la chose complexe est que je suis en formArray. du coup je set un premier formBuilder,
Dans lequel je lui passe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
litigations: this.litigations.array{[]};

Dans mon autre form qui me permet d'ajouter mon litige, du coup je lui déclare mon type dedans.

Mon deuxième form est dans une fonction addLitigation(). Que je call dans mon ngOnInit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
this.initForm();
if (isEditForm) {
   this.addLitigation(this.goodsReceiptProtocol.litigations);
}

Le this.goodsReceiptProtocol.litigations me permet de charger uniquement mes objects contenu dans litigations.

[krakatoa]

peux tu me donner le resultat de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
console.log( JSON.stringify(this.goodsReceiptProtocol.litigations) );

[corentinJacob]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
0:[reference: "test", quantity: "8", type: 0],
1:[comment: "test2", type: 8]

Ce sont donc deux litiges. Le type 0 est égal à MissingLabel et le 8 à Other.

Un goodsReceiptProtocol contient une liste de litiges qui à l'intérieur de cette liste on à plusieurs litiges.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
SupplierNumber: "",
SupplierName: "",
CreatedOn: "",
CreatedBy: "",
Attachment: [],
Litiges: [
0: blablabla,
1: blablabla],
NewFiles: []

Voila le retour pour un goodsReceiptProtocol

[krakatoa]

** complete= true ou false

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
    <mat-checkbox 
                  [checked]="complete"
>
      {{task.name}}
    </mat-checkbox>

** isComplete()

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
    <mat-checkbox 
                  [checked]="isComplete(value)"
>
      {{task.name}}
    </mat-checkbox>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
isComplete(value) {
 
  if (value === ...???????......) {
     return true;
  }
  return false;
}

[corentinJacob]

Ta solution n'était pas la bonne !
Finalement j'ai tout simplement passer dans mon addLitigation() mon

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
this.litigationConfig[index].display = true;

J'ai également fais un switch case pour géré chaque type et leur donnée en vérifiant si référence est présent tu envois la requête côté backend.
J'ai fais une vérification côté backend aussi pour gérer les IsNullOrEmpty.

Merci à vous pour votre aide !
En vous souhaite une agréable journée !