Угловой ngForm не показывает значение

Question

Проблема в том, что моя Форма не получает входные данные и не отображает их значение в консоли при отправке.

Я поместил ngModel на каждый элемент ввода. Я также импортировал FormsModule в app.module.ts.

Вот скриншот моей консоли: Консоль

HTML:

 <form class="w-50 mb-5 mt-5" (ngSubmit)="onSubmit(f)" #f="ngForm">
      <div class="form-group">
        <div class="form-row">
          <div class="col">
            <input type="text" name="name" class="form-control" placeholder="Name" NgModel required>
          </div>
          <div class="col">
            <input type="text" name="lastname" class="form-control" placeholder="Future Family Name" NgModel required>
          </div>
        </div>
      </div>
      <div class="form-group">
        <input type="email" name="email" class="form-control" placeholder="E-Mail" NgModel required>
      </div>
      <div class="form-group">
        <input type="text" name="package" value="{{selectedPackage}}" placeholder="{{selectedPackage}}" class="form-control" readonly NgModel>
      </div>
      <div class="form-group">
        <input type="date" name="date" value="" placeholder="When is your wedding?" class="form-control" NgModel required>
      </div>
      <div class="form-group">
        <textarea class="form-control" rows="4" placeholder="Your message.." NgModel></textarea>
      </div>
      <div class="w-100 d-flex justify-content-center">
        <button type="submit">Send</button>
      </div>
    </form>

Машинопись:

import {Component, Input, OnChanges, OnInit} from '@angular/core';
import {NgForm} from '@angular/forms';

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

  onSubmit(form: NgForm): void {
    console.log(form);
  }

}
```