Mise à jour formulaire (angular + firebase

Mise à jour formulaire (angular + firebase - mat option)

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:

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:

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:

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.

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

Code:

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:

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()}}
 
       ...

Merci

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.

Citation:

(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.

Citation:

{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

Résolu

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

Code:

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