Discussion :

[91fidji]

Bonjour,
Je sollicite votre aide car je m’entraîne a développer avec Angular + Firebase et je rencontre un problème dans mon formulaire.
Je cherche a avoir une liste déroulante dont les données proviennent de Firebase (users dans la partie Mat Option).
Lorsque je clique sur le bouton pour créer, le champs user reste vide et je ne récupère aucune donnée.

Mon html

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
<form  class="create-form" [formGroup]="addupsellForm" novalidate (ngSubmit)="onSubmit(addupsellForm.value)">
  <div class="form-group">
    <li class="mat-form-field--inline">
      <mat-form-field>
        <mat-label> Utilisateur</mat-label>
        <mat-select >
          <mat-option *ngFor="let user of users" type="text" name="username" [value]="user.payload.doc.data()" id="username" formControlName="username" ngDefaultControl>
          {{user.payload.doc.data().username}}
          </mat-option>
          <ng-container *ngFor="let validation of validation_messages.montant">
            <mat-error *ngIf="addupsellForm.get('username').hasError(validation.type) && (addupsellForm.get('username').dirty || addupsellForm.get('username').touched)">{{validation.message}}
            </mat-error> 
          </ng-container>       
        </mat-select>
      </mat-form-field>
 
      <mat-form-field >
        <input matInput placeholder="montant" type="number" class="form-control" id="montant" formControlName="montant">
        <span matPrefix>€&nbsp;</span>
        <ng-container *ngFor="let validation of validation_messages.montant">
            <mat-error *ngIf="addupsellForm.get('montant').hasError(validation.type) && (addupsellForm.get('montant').dirty || addupsellForm.get('montant').touched)">{{validation.message}}
            </mat-error>
        </ng-container>
      </mat-form-field>
 
      <mat-form-field>
        <input matInput placeholder="Date" [matDatepicker]="myDatepicker" class="form-control" id="date" formControlName="date">
        <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
        <mat-datepicker #myDatepicker></mat-datepicker>
      </mat-form-field>
    </li>
  </div>
  <div class="row submit-button-container">
    <div class="col-md-4">
      <button mat-raised-button class="submit-button" color="primary" type="submit" [disabled]>Create</button>
    </div>
  </div>    
</form>

Mon fichier 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
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
import { Component, OnInit } from '@angular/core';
import { FirebaseService } from '../services/firebase.service';
import { Router, Params, ActivatedRoute } from '@angular/router';
import { MatTableDataSource, MatFormField, MatSort, MatDialog } from '@angular/material';
import { ErrorStateMatcher} from '@angular/material/core';
import { FormBuilder, FormGroup, Validators, FormsModule, ReactiveFormsModule,FormControl } from '@angular/forms';
import { UsersComponent } from '../users/users.component';
import { EditUpsellResolver } from '../edit-upsell/edit-upsell.resolver';
import { Observable } from 'rxjs/Observable';
 
@Component({
  selector: 'app-upsell',
  templateUrl: './upsell.component.html',
  styleUrls: ['./upsell.component.css']
})
 
export class UpsellComponent implements OnInit {
  upsell: any;
  upsells;
  addupsellForm: FormGroup;
 
constructor (
  private fb: FormBuilder,
  private route: ActivatedRoute,
  public dialog: MatDialog,
  private router: Router,
  public firebaseService:FirebaseService) { }
 
ngOnInit() {
  this.getUsers();
  this.route.data.subscribe(routeData => {
    let upsell = this.getData();
  })
this.createForm();
}
 
validation_messages = {
  'montant': [
     {type: 'required', message: 'Montant is required'}
   ],
   'username' : [
     {type: 'required', message: 'Surname is required'}
   ]
 };
 
resetFields(){
  this.addupsellForm = this.fb.group({
    username: new FormControl('', Validators.required),
    date: new FormControl('', Validators.required),
    montant: new FormControl('', Validators.required)
  });
}
 
getData() {
  this.firebaseService.getUpsells()
    .subscribe(result => 
      {this.upsells = result}) 
}
 
getUsers() {
  this.firebaseService.getUsers()
    .subscribe(result => 
      {this.users = result})
}
 
onSubmit(addupsellForm) {
  console.log(addupsellForm);
  this.firebaseService.createUpsell(addupsellForm)
  .then(
    res => {
      this.resetFields();
    }
  )
  }
 
delete(upsell) {
  var id = upsell.payload.doc.id;
  this.firebaseService.deleteUpsell(id)
    .then(
      res => {
        this.router.navigate(['/upsell']);
      }, 
      err => {
        console.log(err);
      }
    )
  }
 
displayedColumns: string[] = ['name', 'montant', 'date', 'actions'];
 
  createForm() {
    this.addupsellForm = this.fb.group({
      montant: ['', Validators.required ],
      username: ['', Validators.required ],
      date: ['' ]
    });
 
  }
 
  viewDetails(upsell){
    var id = upsell.payload.doc.id;
    this.router.navigate(['/details/'+id]);
  }
 
  cancel(){
    this.router.navigate(['/upsell']);
  }
}

Et enfin, le service

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
import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { MatDialog } from '@angular/material';
 
@Injectable()
export class FirebaseService {
  private upsellsCollection: AngularFirestoreCollection<any>;
  upsells;
 
  constructor(public db: AngularFirestore) { }
 //Users services
 getUsers() {
    return this.db.collection('users').snapshotChanges()
  }
 
getUser(userKey) {
  return this.db.collection('users').doc(userKey).snapshotChanges();
}
 
createUser(value){
  return this.db.collection('users').add({
    nom: value.nom,
    prenom: value.prenom,
    code: value.code,
    active: true,
    username: value.prenom+' '+value.nom
  })
}
 
//Upsell service
 getUpsells() {
  return this.db.collection('upsell').snapshotChanges();
  }
 
  getUpsell(upsellKey){
    return this.db.collection('upsell').doc(upsellKey).snapshotChanges();
  }
 
  createUpsell(value) {
    return this.db.collection('upsell').add({
      username: value.username,
      montant: parseInt(value.montant),
      date: value.date
    });
  }
 
 deleteUpsell(userKey){
    return this.db.collection('upsell').doc(userKey).delete();
 
  }
 
 updateUpsell(userKey, value){
    return this.db.collection('upsell').doc(userKey).set(value);
  }
 
}

Merci pour votre aide.

[krakatoa]

déjà, au moins voir si il retourne bien des données :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
getUsers() {
  this.firebaseService.getUsers()
    .subscribe(result => 
      {
 
this.users = result
console.log(this.users)
})
}

ensuite ces données sont ils bien interprétées ? accessible dans la boucle du template

Code :

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

1
2
3
4
5
6
 
 <mat-option *ngFor="let user of users" type="text" name="username" [value]="user.payload.doc.data()" id="username" formControlName="username" ngDefaultControl>
 
      {{user.payload.doc.data()}}
 
       ...

[91fidji]

Bonjour Krakatoa,

Tout d'abord merci pour ton aide.

Alors le console.log() dans le getUsers() retourne bien une liste et m'affiche bien la liste des utilisateurs.

(4) [{…}, {…}, {…}, {…}]
0:
payload: {type: "added", doc: QueryDocumentSnapshot, oldIndex: -1, newIndex: 0}
type: "added"
__proto__: Object
1: {type: "added", payload: {…}}
2: {type: "added", payload: {…}}
3: {type: "added", payload: {…}}
length: 4
__proto__: Array(0)

En revanche au niveau du onSubmit() le console.log() me renvoit un username vide.

{montant: 7, username: "", date: Wed Oct 02 2019 00:00:00 GMT+0200 (heure d’été d’Europe centrale)}
date: Wed Oct 02 2019 00:00:00 GMT+0200 (heure d’été d’Europe centrale) {}
montant: 7
username: ""

Dans l'idéal, j'aimerai récupéré l'id du user en question pour le stocker dans firebase, mais le "username" est désespérément vide.

Encore merci

[91fidji]

Bon, j'ai enfin trouvé et c'est une erreur bête.
Il manquait formControlName="username" dans le mat-select.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<mat-select formControlName="username">
          <mat-option *ngFor="let user of users" name="username" [value]="user.payload.doc.data().username" id="username" formControlName="username" ngDefaultControl>
 
      {{user.payload.doc.data().username}}
 
          </mat-option>
          <ng-container *ngFor="let validation of validation_messages.montant">
            <mat-error *ngIf="addupsellForm.get('username').hasError(validation.type) && (addupsellForm.get('username').dirty || addupsellForm.get('username').touched)">{{validation.message}}
            </mat-error> 
          </ng-container>       
        </mat-select>

En tout cas, merci
Olivier