Bonjour,
Je sollicite votre aide car je m’entraîne a développer et je débute 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

<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

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 le service

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.

Problème résolu. 

il manquait 

formControlName="username"

sur le mat-select.

   <mat-form-field>
        <mat-label> Utilisateur</mat-label>
        <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>
      </mat-form-field>