Bonjour, j'ai un formulaire avec un champ prénom:

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
 
  <mat-label>prénom de famille</mat-label>
  <app-formulaire formControlName="prenom"  ></app-formulaire>

ce formulaire contient 2 sections , section civilite auquel je demande le prénom, et une autre section lieu auquel de demande l'adresse

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
 
    <app-civilite formControlName="FCcivilite" *ngIf="etape==2"></app-civilite>
    <app-lieu formControlName="FClieu" *ngIf="etape==3"></app-lieu>

Si je clique sur l'étape 2 je tombe sur le champs prénom à remplir.
si je clique sur l'étape 3 je tombe sur le champs adresse à remplir.

mon formulaire est le même mais dispose de plusieurs forme builder:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
 
    this.FGcivilite = this.formBuilder.group({
      prenom: ['', Validators.required],
      nom: ['', Validators.required],
      naissance: ['', Validators.required],
    });
Quand je remplis le champs prénom , je garde bien ce qu'on a taper dans le champs prénom avec le form controle.
voici ce que cela donne:

Code console : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
 
  "FCcivilite": {
    "prenom": {
      "anonym": "toto"
    },
    "nom": "",
    "naissance": ""
  }

Par contre quand je veux la section app-lieu, et que je reviens à la section civilité, "toto" à disparu ,
ce que je souhaite, c'est donc de récupérer "toto" et de le préremplir pour que l'utilisateur puisse le modifier .


voici mon composant civilité
Code typescript : 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
 
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';
 
@Component({
  selector: 'app-civilite',
  templateUrl: './civilite.component.html',
  styleUrls: ['./civilite.component.less'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CiviliteComponent),
      multi: true
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => CiviliteComponent),
      multi: true,
    }
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
 
})
export class CiviliteComponent {
  FGcivilite;
  subscriptions: Subscription[] = [];
 
  get value() {
    return this.FGcivilite.value;
  }
  set value(value) {
    this.FGcivilite.setValue(value);
    this.onChange(value);
    this.onTouched();
  }
 
  constructor(private formBuilder: FormBuilder) {
    this.FGcivilite = this.formBuilder.group({
      prenom: ['', Validators.required],
      nom: ['', Validators.required],
      naissance: ['', Validators.required],
    });
    this.subscriptions.push(
      this.FGcivilite.valueChanges.subscribe(value => {
        this.onChange(value);
        this.onTouched();
      })
    );
  }
 
  validate(_: FormControl) {
    return this.FGcivilite.valid ? null : { FCcivilite: { valid: false, }, };
  }
 
  ngOnDestroy() {
    this.subscriptions.forEach(s => s.unsubscribe());
  }
 
  onChange: any = () => { };
  onTouched: any = () => { };
  registerOnChange(fn) {
    this.onChange = fn;
  }
 
  writeValue(value) {
    if (value) {
      this.FGcivilite = value;
    }
    if (value === null) {
      this.FGcivilite.reset();
    }
  }
 
  registerOnTouched(fn) {
    this.onTouched = fn;
  }
 
}

Comment je dois faire pour récupérer facilement la donnée toto et préremplir le champs en sachant que je n'ai pas encore valider le formulaire ?

si vous avez une idée, merci de vos réponse