Bonjour ,

j'ai un composant qui possède 2 imbrications de formulaires FGmatière et FGpblk qui englobe un formGroupe:

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
<form [formGroup]="imbriqueForm" (ngSubmit)="submit()">
    <app-form-matiere formControlName="FGmatiere" ></app-form-matiere>
    <app-form-pblk formControlName="FGpblk" ></app-form-pblk>
    <button>Valider</button>
    <button type="button" (click)="resetForm()">Reset</button>
</form>

FGmatière sélectionne plusieurs options, c'est une liste déroulante à choisir entre plusieurs matière:
FGpblk sélectionne plusieurs options, c'est une liste déroulante de choix de catégorie qui dépend du choix de la matière,
par exemple si je sélectionne informatique, on doit me proposer la catégorie programmation, réseau ou infographie,
si je sélectionne francais, on doit me proposer la catégorie français,anglais,italien.

Je recherche donc à récupérer la valeur des catégories en fonction de la première liste choisi.
Quel serais le mécanisme pour faire transités l'information entre ces 3 composantes ?

- 1 composant du formulaire affiche le formulaire
- 2 composant matière qui récupère les matières disponible
- 3 composant catégorie qui récupère les les catégorie disponible

voici à quoi ressemble ma composante matiere:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import { Component, forwardRef, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormBuilder, FormGroup, Validators, FormControl, NG_VALIDATORS } from '@angular/forms';
import { Subscription } from 'rxjs';
import { Router } from '@angular/router';
import { AuthenticationService } from 'src/services/authentification.service';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { NavigationService } from 'src/services/navigation.service';
 
@Component({
  selector: 'app-form-matiere',
  templateUrl: './form-matiere.component.html',
  styleUrls: ['./form-matiere.component.less'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => FormMatiereComponent),
      multi: true
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => FormMatiereComponent),
      multi: true,
    }
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class FormMatiereComponent implements ControlValueAccessor, OnDestroy {
  FGmatiere: FormGroup;
  subscriptions: Subscription[] = [];
  public titre = "Ajouter une nouvelle matière";
  private idSommaireSelected: number;
  public allowSelectedCatego = false;
 
  public televerser = false;
  public menu_hz = JSON.parse(localStorage.getItem("menu_hz"));
  public category;
  public recupIdMongo;
  private matiere;
  public cacheWait = true;
 
  constructor(
    private formBuilder: FormBuilder, private router: Router, public authService: AuthenticationService, private http: HttpClient, private navService: NavigationService
  ) {
 
    this.FGmatiere = this.formBuilder.group({
      listMenuSelected: ['', Validators.required],
    });
 
    this.subscriptions.push(
      this.FGmatiere.valueChanges.subscribe(value => {
        this.onChange(value);
        this.onTouched();
      })
    );
  }
 
  /**uniquement matiere */
  changeIdSommaire(event) {
    this.cacheWait = false;
    if (event.isUserInput) {
      //let urlSommaire = event.source.value._links.self.href;
      this.idSommaireSelected = parseInt(event.source.id.split('-')[2], 10);
      this.idSommaireSelected = this.idSommaireSelected + 1// +1 car on commence à 1
      this.FGmatiere.controls['listMenuSelected'].setValue(this.idSommaireSelected);
     // console.log(JSON.stringify(this.idSommaireSelected));
      localStorage.setItem('listMenuSelected',JSON.stringify(this.idSommaireSelected));
    }
  }
 
  get value() {
 
    return this.FGmatiere.value;
  }
 
  set value(value) {
    this.FGmatiere.setValue(value);
    this.onChange(value);
    this.onTouched();
  }
 
 
 
 
 
  ngOnDestroy() {
    this.subscriptions.forEach(s => s.unsubscribe());
  }
 
  onChange: any = () => { };
  onTouched: any = () => { };
 
 
  registerOnChange(fn) {
 
    this.onChange = fn;
  }
 
  writeValue(value) {
    if (value) {
      this.FGmatiere = value;
    }
 
    if (value === null) {
      this.FGmatiere.reset();
    }
  }
 
  registerOnTouched(fn) {
    this.onTouched = fn;
  }
 
  validate(_: FormControl) {
 
    console.log(this.FGmatiere.valid);
    return this.FGmatiere.valid ? null : { imbriqueForm: { valid: false, }, };
  }
}
j'ai tenté de mettre un évement change dans la balise app-form-matiere mais cela ne fonctionne pas, quand je sélectionne la liste
des matières , je n'ai aucun événement .

pour le moment ce n'est qu'au niveau du composant formulaire que je puisse récupérer quel "options" j'ai choisi.

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<app-form-matiere formControlName="FGmatiere"  change="ldListeMatiere()"></app-form-matiere>

mon raisonnement étais de dire que je change une matière, je pourrais alors charger la liste des catégories dans la listes les options catégories tout en restant à l'intérieur du composant qui possède le formGroup

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<h1>Ajouter une nouvelle publication :</h1>
<form [formGroup]="imbriqueForm" (ngSubmit)="submit()">
    <app-form-matiere formControlName="FGmatiere"  change="ldListeMatiere()"></app-form-matiere>
    <app-form-pblk formControlName="FGpblk"  *ngIf="category"></app-form-pblk>
    <button>Valider</button>
    <button type="button" (click)="resetForm()">Reset</button>
</form>
 
<p>
    Form is {{imbriqueForm.valid ? 'Valid' : 'Invalid'}}
</p>
 
<pre>
      {{imbriqueForm.value | json}}
</pre>

Merci d'avance de vos réponses, si vous avez déjà tenter d'implémenter cela

EDIT solution :

j'ai utiliser les décoration @output pour traverser les composants, je pensais qu'on pourrais utiliser autre chose comme les accessors des formulaires déjà mis en place ...