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.