FormGroup ожидает экземпляр FormGroup. Пожалуйста, передайте один. Нет ошибок в коде, но консоль регистрирует некоторые ошибки

Question

в коде нет ошибок, но консоль регистрирует некоторые ошибки, когда я пытаюсь зарегистрировать информацию, используя метод onSubmit , также выдает ошибку при отображении индекса. html app.component отображает HTML часть в порядке, но происходит сбой при вызове данных contact.component. html регистрирует ошибку в консоли

contact.component. html - файл

<div class="container" fxLayout="column" fxLayoutGap="10px">

  <div fxFlex>
    <div>
      <h3>Contact Us</h3>
      <hr>
    </div>
  </div>

  <div fxFlex>
    <h3>Location Information</h3>
    <div fxLayout="column" fxLayout.gt-sm="row">
      <div fxFlex="50" fxFlexOffset="20px">
        <h4>Our Address</h4>
        <address>
          121, Clear Water Bay Road<br>
          Clear Water Bay, Kowloon<br>
          HONG KONG<br>
          <i class="fa fa-phone"></i>: +852 1234 5678<br>
          <i class="fa fa-fax"></i>: +852 8765 4321<br>
          <i class="fa fa-envelope"></i>:
          <a href="mailto:confusion@food.net">confusion@food.net</a>
        </address>
        <p></p>
        <div>
          <a mat-raised-button href="tel:+85212345678"><i class="fa fa-phone"></i> Call</a>
          <a mat-raised-button><i class="fa fa-skype"></i> Skype</a>
          <a mat-raised-button href="mailto:confusion@food.net"><i class="fa fa-envelope-o"></i> Email</a>
        </div>
      </div>
      <div fxFlex="40">
        <h4>Map of our Location</h4>
      </div>
    </div>
  </div>
  <div fxFlex fxFlexOffset="20px" class="form-size">
    <h3>Send your feedback</h3>
    <form novalidate [formGroup]="feedBackForm">
      <p>
        <mat-form-field class="half-width">
          <input type="text" matInput formControlName="firstname" placeholder="First Name" required>
        </mat-form-field>
      </p>
      <p>
        <mat-form-field class="half-width">
          <input type="text" matInput formControlName="lastname" placeholder="Last Name" required>
        </mat-form-field>
      </p>
      <p>
        <mat-form-field class="half-width">
          <input type="text" matInput formControlName="telnum" placeholder="Telephone" required>
        </mat-form-field>
      </p>
      <p>
        <mat-form-field class="half-width">
          <input type="text" matInput formControlName="email" placeholder="Email" required>
        </mat-form-field>
      </p>
      <table>
        <td>
          <mat-slide-toggle formControlName="agree">
            May we contact you?
          </mat-slide-toggle>
        </td>
        <td>
          <mat-form-field>
            <mat-select placeholder="How?" formControlName="contacttype">
              <mat-option *ngFor="let ctype of contactType" [value]="ctype">
                {{ ctype }}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </td>
      </table>
      <p>
        <mat-form-field class="full-width">
          <textarea matInput formControlName="message" placeholder="Your Feedback" rows=12></textarea>
        </mat-form-field>
      </p>
      <button type="submit" mat-button class="background-primary text-floral-white">Submit</button>
    </form>
  </div>
</div>

contact.component .ts - файл

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import {Feedback, ContactType} from '../shared/feedback';
@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.scss'],
})
export class ContactComponent implements OnInit {
  feedBackForm: FormGroup;
  feedback: Feedback;
  contactType = ContactType;
  @ViewChild('fform') feedbackFormDirective;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {}
  createForm(){
    this.feedBackForm = this.fb.group({
      firstname: ['', Validators.required],
      lastname: ['', Validators.required],
      telnum: [0, Validators.required],
      email: ['', Validators.required],
      agree: false,
      contacttype: 'none',
      message: '',
    });
  }
  onSubmit(){
    console.log('here');
    this.feedback = this.feedBackForm.value;
    console.log(this.feedback);
    this.feedBackForm.reset({
      firstname: '',
      lastname: '',
      telnum: 0,
      email: '',
      agree: false,
      contactType: 'None',
      message: '',
    });
    this.feedbackFormDirective.resetForm();
  }
}

Ошибка

core. js: 6185 Ошибка: formGroup ожидает экземпляр FormGroup. Пожалуйста, введите один.

   Example:


<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>

In your class:

this.myGroup = new FormGroup({
   firstName: new FormControl()
});
at Function.missingFormException (forms.js:2338)
at FormGroupDirective._checkFormPresent (forms.js:7720)
at FormGroupDirective.ngOnChanges (forms.js:7510)
at FormGroupDirective.wrapOnChangesHook_inPreviousChangesStorage (core.js:26853)
at callHook (core.js:4690)
at callHooks (core.js:4650)
at executeInitAndCheckHooks (core.js:4591)
at selectIndexInternal (core.js:9621)
at Module.ɵɵadvance (core.js:9582)
at ContactComponent_Template (contact.component.html:68)