Discussion :

[paintbox]

Bonjour,
dans mon formulaire j'ai 2 radio buttons (ex: A et B) qui permettent de choisir le type de compte que l'on veut créer.
Par défaut, le formulaire se charge selon le type A mais si l'utilisateur clique sur B de nouveaux champs apparaissent.

Mon problème est que lorsque je veux valider et/ou récupérer les valeurs rentrées dans les champs du formulaire, sont seulement disponibles celles du formulaire A.
Je pense que les champs du formulaire B ne sont pas présents dans le DOM et donc inaccessibles.

Voici mon formulaire :

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
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<div class="container-fluid">
    <form [formGroup]="myForm" autocomplete="off" novalidate (ngSubmit)="createUserAccount(myForm.value)">
    <div class="container py-5 h-100 d-flex justify-content-center">
    <div class="col-xl-10">
      <!-- Body -->
      <div class="card-body p-md-15  text-black bg-light">
        <!-- Brand -->
        <div class="row">
          <span class="fw-bold text-secondary d-flex align-items-center">
            <i class="bi-geo-alt-fill color-primary"></i>
            <a href="#" class="navbar-brand color-secondary">Food<b class="color-primary">Truck</b></a>
          </span>
          <hr class="mt-2 color-light-gray">
          <h3 class="mb-4 text-uppercase color-secondary">Création compte</h3>
        </div>
 
        <div class="row">
          <!-- Account Type -->
          <div class="d-md-flex justify-content-start align-items-center mb-4 py-2">
            <h6 class="mb-0 me-4">Type de compte : </h6>
            <div class="form-check form-check-inline mb-0 me-4">
              <input class="form-check-input" type="radio" [checked]="this.customerAccount" name="accountType" id="CustommerAccount" (click)="toggleIsCustomer()"/>
              <label class="form-check-label" for="CustomerAccount">Client</label>
            </div>
 
            <div class="form-check form-check-inline mb-0 me-4">
              <input class="form-check-input" type="radio" [checked]="this.truckAccount" name="accountType" id="TruckAccount" (click)="toggleIsTruck()" />
              <label class="form-check-label" for="TruckAccount">Commerçant</label>
            </div>
          </div>
 
          <!-- Gender -->
          <div class="or-seperator mt-3 color-secondary mb-1"><b>Données du compte</b></div>
          <hr class="color-light-gray">
          <div class="d-md-flex justify-content-start align-items-center mb-4 py-2">
            <div class="col-md-2 me-5 form-group">
              <select class="form-select form-control" id="gender"  formControlName="gender">
                <option *ngFor="let g of genders" [ngValue]="g.id" >{{g.description}}</option>
            </select>
            </div>
            <!-- firstname -->
            <div class="col-md-4 me-4">
              <input type="text" class="form-control" formControlName="firstname" id="firstname" placeholder="Prénom" aria-label="First name">
              <em *ngIf="validateControl('firstname') && hasError('firstname', 'required')">Prénom obligatoire</em>
            </div>
            <!-- lastname -->
            <div class="col-md-5 ms-2">
              <input type="text" class="form-control" formControlName="lastname" id="lastname" placeholder="Nom" aria-label="Last name">
              <em *ngIf="validateControl('lastname') && hasError('lastname', 'required')">Nom obligatoire</em>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col input-group">
            <div class="col-md-4 me-4">
              <div class="input-group">
                <span id="basic-addon1" class="input-group-text">
                <i class="bi bi-person-fill"></i>
                </span>
              <input type="text" class="form-control" formControlName="username" id="username" placeholder="Username" aria-label="User name">
              <em *ngIf="validateControl('username') && hasError('username', 'required')">Nom d'utiliateur obligatoire</em>
            </div>
          </div>
          <span id="basic-addon1" class="input-group-text">
            <i>@</i>
          </span>
            <input type="text" class="form-control" formControlName="mail" id="mail"  placeholder="mail" aria-label="Mail">
            <em *ngIf="validateControl('mail') && hasError('mail', 'required')">Mail obligatoire</em>
          </div>
        </div>
 
        <div class="row mt-4">
          <div class="col-md-4">
            <input type="text" class="form-control" formControlName="login" id="login" placeholder="Login" aria-label="login">
            <em *ngIf="validateControl('login') && hasError('login', 'required')">Login obligatoire</em>
          </div>
          <div class="col-md-4">
            <input type="text" class="form-control" formControlName="password" id="password" placeholder="Password" aria-label="Password">
            <em *ngIf="validateControl('password') && hasError('password', 'required')">Mot de passe obligatoire</em>
          </div>
          <div class="col-md-4">
            <input type="text" class="form-control" formControlName="confirmpassword" id="confirmpassword" placeholder="ConfirmPassword" aria-label="Confirm Password">
          </div>
        </div>
 
        <!-- Truck Datas -->
        <div class="row">
          <div class=" mt-5">
            <div class="or-seperator mt-3 color-secondary mb-1" [hidden]="!truckAccount"><b>Données companie</b></div>
            <hr class="mt-1 color-light-gray">
            <div class="row">
              <div class="col-md-12 me-5 mb-3 form-group" [formGroup]="myForm">
               </div>
            </div>
            <!-- Truck Name  -->
          <div class="row">
            <div class="col-md-6 mt-2 mb-4" [hidden]="!truckAccount">
              <input type="text" class="form-control" placeholder="Nom du camion" formControlName="name" id="name" aria-label="name">
              <em *ngIf="truckAccount && validateControl('name') && hasError('name', 'required')">Nom de camion obligatoire</em>
            </div>
            <div class="col-md-6 mb-4" [hidden]="!truckAccount">
              <div class="input-group">
                <div class="input-group-text">@</div>
                <input type="text" class="form-control" placeholder="Mail commercial" formControlName="commercialmail" id="commercialmail" aria-label="TruckEmail">
                <em *ngIf=" truckAccount && validateControl('commercialmail') && hasError('commercialmail', 'required')">Mail commercial obligatoire</em>
              </div>
              </div>
          </div>
          <div class="row">
            <div class="col-md-6 mb-4">
              <div class=" input-group">
                  <span id="basic-addon1" class="input-group-text">
                    <i class="bi bi-telephone-fill"></i>
                </span>
                <input type="text" class="form-control" placeholder="Téléphone commercial" formControlName="phone" id="phone" aria-label="ProfessionalPhone">
                <em *ngIf="truckAccount && validateControl('phone') && hasError('phone', 'required')">Mail commercial obligatoire</em>
              </div>
            </div>
            <div class="col">
              <input type="text" class="form-control" placeholder="Numéro de TVA" formControlName="vatnumber" id="vatnumber" aria-label="TVA">
              <em *ngIf="validateControl('vatnumber') && hasError('vatnumber', 'required')">Numéro de TVA obligatoire</em>
            </div>
          </div>
        </div>
        </div>
        <div class="row">
          <hr class="mt-5 ml-4 mr-4 color-light-gray">
 
          <!-- Submit Button -->
          <div class="d-flex justify-content-end pt-3">
            <button type="button" class="btn btn-secondary">Reset all</button>
            <button type="submit" class="btn btn-primary shadow-none  ms-2">Submit form</button>
          </div>
        </div>
      </div>
      <!-- Fin Body -->
      </div>
    </div>
</form>
<!-- <app-success-modal [modalHeaderText]="'Success message'" 
    [modalBodyText]="'Action completed successfully'" [okButtonText]="'OK'" 
    (redirectOnOK)="redirectTo()"></app-success-modal>
 
    <app-error-modal [modalHeaderText]="'Error message'" 
    [modalBodyText]="errorMessage" [okButtonText]="'OK'"></app-error-modal> -->
</div>

et voici comment je récupère les valeurs :

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
 
private executeUserAccountCreation = (form) =>{
    if(this.truckAccount){
      console.log(" test = " + this.truckAccount);
      const truck: Truck = {
        name:  this.myForm.get('name')?.value,
        commercialMail: this.myForm.get('commercialmail')?.value,
        phone: this.myForm.get('phone')?.value,
        vatnumber: this.myForm.get('vatnumber')?.value,
        description: '',
      }
 
      let apiTruck: string = environment.apiAddress + 'Truck/Registration';
      this.repository.create(apiTruck, truck)
      .subscribe(response => {
        console.log('New Truck Id : ' + response);
        this.truckId = <number>response;
 
        $('#successModal').modal();
      },
      (error =>{
        this.errorHandler.handleError(error);
        this.errorMessage = this.errorHandler.errorMessage;
      })
      );
    }
 
    const userAccount:  UserAccount = {
      firstName: this.f.firstname.value,
      lastName: this.f.lastname.value,
      mail: this.f.mail.value,
      genderId: this.f.gender.value,
      password: this.f.password.value,
      userName: this.f.username.value,
      login: this.f.login.value,
      useraccountTypeId: this.customerAccount == true ? 1 : 2,
      name:  this.truckAccount == true ? this.f.name.value : null,
      commercialmail: this.truckAccount == true ? this.f.commercialmail.value : null,
      phone: this.truckAccount == true ? this.f.phone.value : null,
      vatnumber: this.truckAccount == true ? this.f.vatnumber.value : null,
      truckId: <number>this.truckId
    }
 
    let apiUserAccount: string = environment.apiAddress + 'UserAccount/Registration';
    this.repository.create(apiUserAccount, userAccount)
      .subscribe(response => {
        $('#successModal').modal();
      },
      (error =>{
        this.errorHandler.handleError(error);
        this.errorMessage = this.errorHandler.errorMessage;
      })
      )
  }

[dukoid]

un ngIf ajoute et retire du DOM


faut jouer avec le css et le display: none / inline, ainsi il sera toujours compris dans le DOM

Code :

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

1
2
 
[ngClass]="{'display': condition1, 'hide': condition2}"

sinon il y a cette technique :

https://stackblitz.com/github/tehfed...s.component.ts
(voir l'exemple en bas de page)

[paintbox]

Merci pour ton aide dukoid.
J'ai finalement fait 2 formulaires différents.

Je note malgré tout ton exemple.
Merci