Why do I get this Template parse errors in Angular

Question

I learn Angular and now I get this Angular Template parse errors when debugging: I dont think this has to do with missing import its more some wrong naming maybe. I use Visual Studio as editor

Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("t-card>
  <mat-card-header><mat-card-title>New Contact</mat-card-title></mat-card-header>
  <form [ERROR ->][formGroup]="newContact" class="form-container">

    <mat-form-field>
"): ng:///AppModule/SearchBooksComponent.html@2:8
No provider for ControlContainer ("<mat-card>
  <mat-card-header><mat-card-title>New Contact</mat-card-title></mat-card-header>
  [ERROR ->]<form [formGroup]="newContact" class="form-container">

    <mat-form-field>
"): ng:///AppModule/SearchBooksComponent.html@2:2
No provider for NgControl ("

    <mat-form-field>
      [ERROR ->]<input type="text" matInput placeholder="Name" formControlName="name">
      <mat-error *ngIf="formC"): ng:///AppModule/SearchBooksComponent.html@5:6
No provider for NgControl ("

    <mat-form-field>
      [ERROR ->]<mat-select placeholder="Type" formControlName="type">
        <mat-option [value]="1">
          W"): ng:///AppModule/SearchBooksComponent.html@12:6
No provider for NgControl ("

    <mat-form-field>
      [ERROR ->]<input type="tel" matInput placeholder="Number" formControlName="number">
      <mat-error *ngIf="fo"): ng:///AppModule/SearchBooksComponent.html@29:6

This is my search-books.component.html

<mat-card>
  <mat-card-header><mat-card-title>New Contact</mat-card-title></mat-card-header>
  <form [formGroup]="newContact" class="form-container">

    <mat-form-field>
      <input type="text" matInput placeholder="Name" formControlName="name">
      <mat-error *ngIf="formControlName.hasError('required')">
        Name is <strong>required</strong>
      </mat-error>
    </mat-form-field>

    <mat-form-field>
      <mat-select placeholder="Type" formControlName="type">
        <mat-option [value]="1">
          Work
        </mat-option>
        <mat-option [value]="2">
          Cellphone
        </mat-option>
        <mat-option [value]="3">
          Home
        </mat-option>
      </mat-select>
      <mat-error *ngIf="formControlName.hasError('required')">
        Type is <strong>required</strong>
      </mat-error>
    </mat-form-field>

    <mat-form-field>
      <input type="tel" matInput placeholder="Number" formControlName="number">
      <mat-error *ngIf="formControlName.hasError('required')">
        Number is <strong>required</strong>
      </mat-error>
    </mat-form-field>

    <button mat-raised-button class="submitForm" (click)="addContact()">Save</button>
  </form>
</mat-card>
<button mat-raised-button (click)="goBack()" class="backButton" title="Go Back"><i class="material-icons">chevron_left</i>Back</button>

Please advice what i´m doing wrong. I use Visual Studio

This is my Package.json

{
  "name": "client-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.0.1",
    "@angular/cdk": "^8.0.1",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/material": "^8.0.1",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "angular-route": "^1.7.8",
    "bootstrap": "^4.3.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.2",
    "@angular/compiler-cli": "~8.0.0",
    "@angular/language-service": "~8.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}

Possible duplicate of [Can't bind to 'formGroup' since it isn't a known property of 'form'](https://stackoverflow.com/questions/39152071/cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form) — Fateme Fazli, Jun 15 '19 at 07:52
yes I missed adding ReactiveFormsModule as imports in app.module, @xyz add your answer and I will accept — Tord Larsen, Jun 15 '19 at 07:58

score 3 · Accepted Answer · answered Jun 15 '19 at 08:04

Import ReactiveFormsModule into your root module.

import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
    .....,
    imports: [
        .....
        ReactiveFormsModule
        .....
    ],
    .....
})
export class AppModule {
    .....
}

Why do I get this Template parse errors in Angular

1 Answers1

Linked