Получение «Невозможно прочитать значение свойства неопределенного значения» в свойстве formControlName

Я использую Angular 7 и Google Material Design и следовал этому руководству для реактивных форм: https://angular.io/guide/reactive-forms#step-1-creating-a-formgroup-instance.

Я использовал formGroup вместе с formControlName. Вот мой файл логин.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor() { }

  loginForm = new FormGroup({
    email: new FormControl(''),
    password: new FormControl(''),
  });

  ngOnInit() {
  }

  onSubmit() : void {
    console.info(this.loginForm.value);
  }
}

Вот мой логин.component.html:

<mat-card class = "login-card">
    <mat-card-header>
        <mat-card-title>Login</mat-card-title>
    </mat-card-header>
    <mat-card-content>
        <form [formGroup] = "loginForm" class = "login-form" (ngSubmit) = "onSubmit()">
            <table class = "login-full-width" cellspacing = "0">
                <tr>
                    <td>
                        <mat-form-field class = "login-full-width">
                            <input matInput type = "text" formControlName = "email" placeholder = "Email" required>
                        </mat-form-field>
                    </td>
                </tr>
                <p>
                    Value: {{email.value}}
                </p>
                <tr>
                    <td>
                        <mat-form-field class = "login-full-width">
                            <input matInput formControlName = "password" placeholder = "Password" type = "password" required>
                        </mat-form-field>
                    </td>
                </tr>
            </table>
        </form>
        <mat-spinner [style.display] = "showSpinner ? 'block' : 'none'"></mat-spinner>
    </mat-card-content>
    <mat-card-actions>
        <button mat-raised-button [disabled] = "!loginForm.valid" color = "primary">Login</button>
    </mat-card-actions>
</mat-card>

Это ошибка, которую я получаю при переходе на страницу входа:

LoginComponent.html:11 ERROR TypeError: Cannot read property 'value' of undefined
at Object.eval [as updateRenderer] (LoginComponent.html:15)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:23937)
at checkAndUpdateView (core.js:23312)
at callViewAction (core.js:23548)
at execComponentViewsAction (core.js:23490)
at checkAndUpdateView (core.js:23313)
at callViewAction (core.js:23548)
at execEmbeddedViewsAction (core.js:23511)
at checkAndUpdateView (core.js:23308)
at callViewAction (core.js:23548)

Это строка 11 логин.component.html:

<input matInput type = "text" formControlName = "email" placeholder = "Email" required>

Я следовал инструкциям шаг за шагом, и это было очень просто. Я пропустил что-то здесь, что вызывает ошибку?