为什么我的角度材料设计选择选项不能被选中？

Question

I have just managed to populate a select dropdown menu in Angular 8 with items from Firestore. But I can't select the options, ie they show up in the dropdown, but aren't entered into the form when I click them. (The validator error message is still shown.) No errors when debugging or in browser console.

UPDATE: If I remove the material design parts of the html and make it a "regular" select dropdown, like below, it works. What do I need to change in the code with mat-select for it to work there too?

<select formControlName="moduleID" (change)="changeModule($event.target.value)">
   <option *ngFor="let module of modules" [ngValue]="module.payload.doc.data().moduleID">{{module.payload.doc.data().moduleID}}</option>
</select>

test.component.html (with the select in question in the second div):

<form class="create-form" [formGroup]="stopSessionForm" novalidate (ngSubmit)="onSubmit(stopSessionForm.value)">

    <div class="form-group">
        <mat-radio-group formControlName="phase" (change)="getModules($event)">
            <mat-radio-button value=1>Phase 1</mat-radio-button>
            <mat-radio-button value=2>Phase 2</mat-radio-button>
        </mat-radio-group>
        <ng-container *ngFor="let validation of validation_messages.phase">
            <mat-error
                *ngIf="stopSessionForm.get('phase').hasError(validation.type) && (stopSessionForm.get('phase').dirty || stopSessionForm.get('phase').touched)">
                {{validation.message}}</mat-error>
        </ng-container>
    </div>

    <div class="form-group">
        <mat-form-field>
            <mat-label>Choose module/entity ID number</mat-label>
            <mat-select formControlName="moduleID" (change)="changeModule($event.target.value)">
                <mat-option *ngFor="let module of modules" [ngValue]="module.payload.doc.data().moduleID">
                    {{module.payload.doc.data().moduleID}}
                </mat-option>
            </mat-select>
            <ng-container *ngFor="let validation of validation_messages.moduleID">
                <mat-error
                    *ngIf="stopSessionForm.get('moduleID').hasError(validation.type) && (stopSessionForm.get('moduleID').dirty || stopSessionForm.get('moduleID').touched)">
                    {{validation.message}}</mat-error>
            </ng-container>
        </mat-form-field>
    </div>

    <div class="row submit-button-container">
        <button mat-raised-button class="submit-button" type="submit" [disabled]="!stopSessionForm.valid">Stop
            session</button>
    </div>
</form>

test.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { MatDialog } from '@angular/material';
import { Router } from '@angular/router';
import { FirebaseService } from '../shared/firebase.service';

@Component({
  selector: 'app-stop-session',
  templateUrl: './stop-session.component.html',
  styleUrls: ['../shared/forms.component.css']
})
export class StopSessionComponent implements OnInit {
  stopSessionForm: FormGroup;
  modules;

  validation_messages = {
    'phase': [
      { type: 'required', message: 'Phase is required.' },
    ],
    'moduleID': [
      { type: 'required', message: 'Module/entity ID number is required.' },
    ],
  };

  constructor(
    private fb: FormBuilder,
    private router: Router,
    public firebaseService: FirebaseService
  ) { }

  ngOnInit() {
    this.createForm();
    this.getModules();
  }

  getModules = () => {
    this.firebaseService
    .getModules(this.stopSessionForm.value.phase)
    .subscribe(res =>(this.modules = res));
  }

   // Choose module using select dropdown ----- NEEDED??------
   changeModule(e) {
    this.stopSessionForm.value.moduleID.setValue(e.target.value, {
      onlySelf: true
    })
    console.log(this.stopSessionForm.value.moduleID)
  }

  createForm() {
    this.stopSessionForm = this.fb.group({
      phase: ['1', Validators.required],
      moduleID: [null, Validators.required],
    });
  }

  resetFields() {
    this.stopSessionForm = this.fb.group({
      phase: new FormControl('1', Validators.required),
      moduleID: new FormControl(null, Validators.required),
    });
  }

  onSubmit(value) {
    this.firebaseService.stopSession(value)
      .then(
        res => {
          this.resetFields();
          this.router.navigate(['/stop-session']);
          window.alert('Session end data has been sent successfully!');
        })
      .catch(function (error) {
        console.error("Error writing to database: ", error);
        window.alert("Error writing to database!");
      });
  }
}

firebase.service.ts:

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { AngularFireAuth } from "@angular/fire/auth";

@Injectable({
  providedIn: 'root'
})

export class FirebaseService {

  constructor(public afs: AngularFirestore) {}

  getModules(phase) {
    var collection:string = "ModulesPhase"+phase;
    return this.afs.collection(collection).snapshotChanges();
  }

//...

  };
}

Answer 1

It turns out if I change [ngValue] into [value] it works!

There wasn't a problem using [ngValue] if I didn't use mat-select though (standard select instead), so I don't understand why this is so.