Discussion :

[keokaz]

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

[krakatoa]

je ne comprends pas ta demande.
peux tu en dire plus sur l'objectif de tout ça. avec un exemple de scénario d'utilisation.

[keokaz]

L'objectif est de faire comme un tunnel de panier de vente, donc de voir les étapes des parties du formulaire découper en "sous" formulaire .

- le formulaire se compose de plusieurs formulaire imbriqué.
J'ai pas tout mis mes, j'ai plusieurs champs à remplir(dans mon exemple il n'y a qu'un seul champs à remplir), mais en fait il y en 3 ou 4.

Code html :

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

1
2
3
4
5
6
7
8
<form [formGroup]="imbriqueForm" (ngSubmit)="submit()">
    <app-auth *ngIf="tunnelNow==0"></app-auth>
    <button *ngIf="tunnelNow==1" mat-raised-button (click)="modalVerifClef()"></button>
    <app-civilite formControlName="FCcivilite" *ngIf="tunnelNow==2"></app-civilite>
    <app-lieu formControlName="FClieu" *ngIf="tunnelNow==3"></app-lieu>
    <app-telephones formControlName="FCmoyCom" *ngIf="tunnelNow==4"></app-telephones >
    <button mat-raised-button type="submit" color="primary" [disabled]="!imbriqueForm.valid">valider</button>
</form>

Ici les résultats des champs saisies

Code html :

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

1
2
3
4
5
6
7
<p>
    Form is {{imbriqueForm.valid ? 'Valid' : 'Invalid'}}
</p>
 
<pre>
      {{imbriqueForm.value | json}}
</pre>

si au moment de valider le tunnel du formulaire le backend détecte un erreur , il redirige vers la partie du formulaire à modifier par exemple :

Code javascript :

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

tunnelNow=3 //redirige vers la partie du formulaire numéro 3

Lorsque je redirige le formulaire , je possède les saisies des l'utilisateurs mais les champs ne sont pas préremplis, ce qui oblige à l'utilisateur à retaper tout les champs.
Donc mon but est de pouvoir réutiliser ces données et le préremplir.

J'ai tenté d'utiliser l'attribut value="FCcivilite.prenom" mais cela ne fonctionne pas

Code html :

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

<app-formulaire formControlName="prenom" value="FGcivilite.prenom.anonym" ></app-formulaire>

[dukoid]

voici un exemple avec 2 formulaires séparé (shipping et billing) qui sont ensuite réunis en un seul formulaire dans app.component
c'est ce que j'ai fait dans un de mes projets pour un système de formulaire à étape

https://stackblitz.com/edit/monolith...component.html

[keokaz]

Merci dukoid , c'est le bout de code qui va me faire avance

Quant tu fais:

Code :

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

1
2
3
4
 
  formInitialized(name: string, form: FormGroup) {
    this.checkoutForm.setControl(name, form);
  }

si le nom est billing , a quoi ça correspond , c'est un attribut ?
car j'ai chercher billing et je ne le trouve pas en tant qu'attribut, il est ensuite concaténer avec tous les suffixes des noms de fichiers ?


J'ai tenté de faire la même chose avec mon code mais je me retrouve avec l'erreur qui ne trouve pas civilité, d'ou la question ...

[krakatoa]

'civilite' c'est un nom avec des apostrophes et non une variable



// Le formulaire global est composé d'un champ: fullname + composant billing-form + composant shipping-form
// les formulaires enfants : billing-form + shipping-form sont envoyé au formulaire global: checkoutForm du composant parent: 'app.component'

app.component.html

Code html :

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

1
2
3
4
5
<form novalidate [formGroup]="checkoutForm">
     <input matInput type="text" placeholder='Full name' formControlName="fullName">
     <billing-form (formReady)="formInitialized('billing', $event)"></billing-form>                                     // formInitialized(...  )  est la fonction qui doit être appelé 
     <shipping-form (formReady)="formInitialized('shipping', $event)"></shipping-form>                          // formInitialized(...  )  est la fonction qui doit être appelé 
</form>

app.component.html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
...
  checkoutForm: FormGroup;
...
  ngOnInit() {
    ...
    this.checkoutForm = this.fb.group({
      fullName: null                                // au départ, il y a qu'un champs:   fullname
    })
  }
...
  formInitialized(name: string, form: FormGroup) {            // enregistre le formulaire shipping ou billing dans le formulaire global: this.checkoutForm
    this.checkoutForm.setControl(name, form);
  }

ShippingFormComponent.ts

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
...
  @Output() formReady = new EventEmitter<FormGroup>()
  shippingForm: FormGroup;
...
  ngOnInit() {
 
    this.shippingForm = this.fb.group({
      country: null,
      city: null,
      address: null,
      zip: null
    });
 
    this.formReady.emit(this.shippingForm);         // le formulaire: this.shippingForm est envoyé au formulaire global de app.component
  }                                                                   // c'est une communication enfant vers parent

[keokaz]

Merci de ta précision,je viens de comprendre que c'est un nom qu'on peut donner aléatoirement , et qu'il n'a pas été fixe et déclarer ,
C'est pour cela que je trouve pas avec la recherche de "billing"


Chez cela ne fonctionne pas car je pense que j'ai un problème entre le parent et l'enfant, car mes formulaires imbriquer ne sont par relié à un enfant mais un sous enfant,
car mes formulaire sont à l'intérieur d'un composant formulaire .

Code :

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

1
2
3
4
 
formulaire.component
| -- formulaire civilite.component
| -- formulaire telephones.component

pour le moment je pense que je ne vais pas donner la liberté à l'utilisateur de se "promener" sur le tunnel, l faut que je refasse tout mon formulaire à cause de mes sous imbrication.