Discussion :

[dukoid]

(1) si tu ouvres des balises, il faut les fermer
regarde bien 2 balises div sont ouvertes mais pas fermées


(2)
relance la commande d'installation

ng add @angular/material


(3) il ya d'autres erreurs que tu pourras corriger

[Olivier_Bounty]

Yes, je viens de les voir. Merci

Du coup, j'ai réinstallé material et ai reessayé de faire le form comme il faut mais je me suis perdu niveau logique là.
Est ce que je peux te demander ton aide, s'il te plait?

En gros, je veux que ce tableau créé une ligne autant de fois que l'utilisateur veut. Ici, j'ai mis 2 jours mais dans l'idéal ca serait 1 mois pour qu'il voit ses tarifs sur le mois.
J'ai donc mis les formgroup au sein du tableau entre la création de tr et de td car mon slider ne marchait plus lorsqu'il était "inclus" dans le formulaire. Il faut que je le laisse hors du form mais par contre, le champs du taux d'occupation lui pour être pris en compte par le formulaire est nécessaire.

En dessous du tableau, j'ai des données qui seront communes à toutes les lignes du tableau: le nombre total de chambres.

Est ce que je me suis embrouillé sur le sujet? En tout cas, merci pour les précédentes indications

[dukoid]

dans mon message du 14/10 je t'ai donné un exemple de formArray
tu as fait différemment


la 1ere chose à faire est de bien écrire le FormArray
re écris le code avec mes indications !

ensuite tu affiche dans la console le FormArray
tu regardes qu'il est bien formé !

je regarderai si t'es bloqué....

[Olivier_Bounty]

Effectivement, ca n'était pas la même méthode. J'avais suivi un tuto sur internet qui employait le formbuilder.

Arf, ca m'apprendra à lire de travers et de penser que "ce n'est pas grave" si ce n'est pas exact à 100%.

J'ai corrigé sur https://stackblitz.com/edit/angular-...m.component.ts

Par contre, je me suis perdu sur l'usage là du *ngFor :

Code html :

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

1
2
3
4
5
6
<div *ngFor="let skill of skills.controls;">
  <ng-container [formGroup]="skill">
    <input formControlName="level" />
    <input formControlName="name" />
  </ng-container>
</div>

Ce que j'ai fait ne convient pas? J'indique un tableau sur lequel boucler.

Aussi, juste pour ceux qui auraient le même souci, dans mon essai de cette nuit sur les FormArray, j'ai vu que les controls ne passaient pas, j'avais remplacé les ".controls" par des ['controls'] comme le suggèrait https://www.codegrepper.com/code-exa...ractControl%27.

Les tests des tutos fonctionnaient après cela

[dukoid]

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
  revenueManagerForm: FormGroup;
  days = new FormArray([]);
 
  constructor(private http: HttpClient) {}
 
  ngOnInit(): void {
 
    this.http.get('assets/data.json').subscribe((products: any) => {              // ON FAIT LE TRAITEMENT DANS LE SUBSCRIBE
      console.log(products);
      //
      this.revenueManagerForm = new FormGroup({
        days: new FormArray([])
      });
 
      //
 
      for (let day = 0; day < 3; day++) {
        const group = new FormGroup({
          date: new FormControl('')
          /*
          revenue: new FormControl(""),
          coefficientPonderation: new FormControl(""),
          types: new FormControl(""),
          occupancyRate: new FormControl(""),
          prixMax: new FormControl(""),
          prixMin: new FormControl(""),
          nbOfRooms: new FormControl("")
          */
        });
        this.days.push(group);
      }
 
 
      for (const product of products) {
        for (let day = 0; day < 3; day++) {
          //
          this.days.controls[day].get('date').setValue(product.date);
          //
          //group.get("date").setValue(product.date);
          //group.get("occupancyRate").setValue(product.occupancyRate);
        }
      }
      console.log(this.days);
 
 
      this.days.controls.forEach((item, idx) => {
        this.revenueManagerForm.setControl(idx.toString(), item)
      });
      console.log(this.revenueManagerForm);
 
 
      this.revenueManagerForm.valueChanges.subscribe((values: any) => {
        console.log(values);
      });
    });

Code html :

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

1
2
3
4
5
6
7
  <div *ngFor="let day of days.controls;">
    <ng-container [formGroup]="day">
      <input formControlName="date" />
...
...
    </ng-container>
  </div>

à toi de completer le reste