Instead of wasting time trying to understand the example .ts file, just follow these simple steps:

Click on the 'pop-out' icon highlighted in the image below to access a fully functional StackBlitz example.

https://i.sstatic.net/imATI.png

To verify the necessary modules, refer to this link:

https://i.sstatic.net/TCY4Z.png

If you encounter any issues related to ReactiveFormsModule, make sure to comment it out to prevent errors like:

Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. 

There is an additional factor contributing to this issue:

The component where you are utilizing formControl has not been declared in a module that includes the ReactiveFormsModule.

Therefore, it is crucial to verify the module responsible for defining the component and causing this error.

If you are using standalone components, remember that the import of ReactiveFormsModule should be placed inside the component itself rather than in app.module.ts.

import { ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
  standalone: true,
  imports: [ ReactiveFormsModule ]
})
export class FormRecipesComponent {

constructor() {}

name = new FormControl('');

}

Starting from version 9.1.4, all you have to do is import ReactiveFormsModule

Visit this link for more information on reactive forms in Angular

After including the FormsModule in AppModule, I encountered an issue with it not functioning properly. To resolve this, I also had to incorporate the ReactiveFormsModule.

After some updates to Angular 12, I noticed that the imports path for MatAutocompleteModule has been altered and surprisingly, my issue was resolved. The new path now appears as follows: https://i.sstatic.net/2jZYC.png

What I found useful was rearranging my code by moving the imports section above the declaration and export sections in my Angular project. I don't exactly know why it made a difference, but it definitely helped...

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MatSlideToggleModule,
  ],
  declarations: [SettingsComponent],
  exports: [
    SettingsComponent
  ]
})
export class SettingsModule { }

One method that worked well for me was constructing the form directly within the template using @component({}), as shown below--

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

@Component({
  selector: 'app-contact-form',
  template:`
  <form class="validation-form" validate method="createUserWithEmailAndPassword">
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="firstName">First name</label>
      <input type="text" [formControl]="firstName" id="firstName" placeholder="Please enter your first name" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="lastName">Last name</label>
      <input type="text" [formControl]="lastName" id="lastName" placeholder="Please enter your last name" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="email">Email address</label>
        <input type="email" [formControl]="email" id="email" aria-describedby="emailHelp" placeholder="Please enter your last name" required>
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        <div class="valid-feedback">
          Looks good!
        </div>
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="password">Password</label>
      <input type="password" [formControl]="password" id="password" placeholder="Please enter your password" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="zip">Zip</label>
      <input type="text" [formControl]="zip" id="zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>`,

  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.scss']
})
export class ContactFormComponent implements OnInit {

  firstName =  new FormControl('');
  lastName =  new FormControl('');
  email =  new FormControl('');
  password =  new FormControl('');

  constructor() { }

  ngOnInit(): void {
  }

}

By implementing this approach, I was able to resolve any error display issues. If problems persist, you may also benefit from trying out this method.

To start, incorporate a standard matInput into your template. Assuming you are utilizing the formControl directive from ReactiveFormsModule to monitor the input's value.

Reactive forms offer an approach based on models for managing inputs in forms that undergo changes over time. This tutorial illustrates how to initiate and update a basic form control, progress towards using multiple controls as a group, validate form values, and implement more sophisticated forms.

import { FormsModule, ReactiveFormsModule } from "@angular/forms"; // Use this to access ngModule

...

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    FormsModule,
    RouterModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MaterialModule],

It turned out the mistake I was making was using [FormControl] instead of [formControl] - just remember to keep the capitalization correct!