typescript – Angular FormControl não está a ficar com o valor colocado

Eu tenho um form em Angular que não está a ficar com o valor preenchido nos controls.

<form (formGroup)="loginForm">
  <div class="form-row">
    <label for="txtEmail" class="form-check-label col-sm-2">Email</label>
    <div class="form-group col-sm-10">
      <input formControlName="email" type="text" class="form-control form-control-sm" id="txtEmail" placeholder="Email">
    </div>
  </div>
  <div class="form-row">
    <label for="txtPassEuword" class="form-check-label col-sm-2">Password</label>
    <div class="form-group col-sm-10">
      <input formControlName="password" type="password" class="form-control form-control-sm" id="txtPassword" placeholder="Password">
    </div>
  </div>

  <button type="submit" class="btn btn-primary" (click)="login()">Login</button>
</form>

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { JwtService } from '../account/jwt.service';

@Component({
  selector: 'account-login',
  templateUrl: './login.component.html',
})
export class LoginComponent {
  loginForm = new FormGroup({
    email: new FormControl(),
    password: new FormControl()
  });

  constructor(private jwtService: JwtService) { }

  login(){
    debugger;
    this.jwtService.login(this.loginForm.value.email, this.loginForm.value.password);
  }
}

Quando preencho o form e clico no botão de login o this.loginForm.value.email não apresenta nenhum valor. Qual é o problema?

Eu experimentei o mesmo código online neste site https://codesandbox.io/s/brave-curran-9mtfr e deu certo.