Console error: Can’t bind to 'formGroup' Since it isn’t a known Property of 'form'

Question

I’m using Angular 6 I’m creating a form:

The form:

<app-layout>


<div class="card">
   <div class="card-header">
     Novo Post
   </div>
   <div class="card-body">
     <form [formGroup]="form" (ngSubmit)="create($event)">
       <div class="form-group">
         <label for="title">Title</label>
         <input formControlName="title" type="text" name="title" id="title" class="form-control" placeholder="Title name">
       </div>

       <div class="form-group">
           <label for="body">Body</label>
           <textarea formControlName="body" rows="10" name="body" id="body" class="form-control" placeholder="Your body"></textarea>
         </div>

         <div class="form-group">
           <button type="submit" class="btn btn-primary">Save</button>
         </div>

     </form>
   </div>
 </div>


</app-layout>

My Form Component:

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validator} from '@angular/forms';
import { AppService } from './services/app.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private appService: AppService, private fb: FormBuilder, private formGroup: FormGroup ) {}

  public form =  this.fb.group({
    title: [""],
    body: [""]
  });

  // tslint:disable-next-line:use-life-cycle-interface
  ngOnInit() {
    this.appService.fetchServer().subscribe(data => console.log(data));
  }

  create(e) {
    this.appService.save(this.form.value.title, this.form.value.body).subscribe(result => console.log(result));

  }

}

My app.service:

    import { Injectable } from '@angular/core';
    import { Http, Response, Headers, RequestOptions} from '@angular/http';
    import { Observable } from 'rxjs/Observable';
    import 'rxjs/add/operator/map';

    import { Post } from './post';


    @Injectable({
      providedIn: 'root'
    })
    export class AppService {

      private url = 'http://localhost:9000/';

      constructor(private http: Http) {}

      fetchServer(){
        return this.http.get(this.url);
       }

       save(title: string, body: string): Observable<Post> {
         const data = JSON.stringify({title, body});
         const headers = new Headers();
         headers.append('Content-Type', 'application/json');
         const options = new RequestOptions({ headers });
          return this.http.post(`${this.url}/posts`, data, options).map(res => res.json());
       }
    }

Meu service de Post:

    export class Post {
      constructor(public _id: String,
        public title: String,
        public body:  string,
        public slug: String,
        public crated_at: Date) {}

    }

Meu app.module:

export class Post {
  constructor(public _id: String,
    public title: String,
    public body:  string,
    public slug: String,
    public crated_at: Date) {}

}

The error message in my browser console:

compiler.js:1021 Uncaught Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("
    </div>
    <div class="card-body">
      <form [ERROR ->][formGroup]="form" (ngSubmit)="create($event)">
        <div class="form-group">
          <label for"): ng:///UiModule/PainelComponent.html@15:12
    at syntaxError (compiler.js:1021)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14830)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24018)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:24005)
    at compiler.js:23948
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23948)
    at compiler.js:23858
    at Object.then (compiler.js:1012)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23857)
syntaxError @ compiler.js:1021
push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse @ compiler.js:14830
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate @ compiler.js:24018
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate @ compiler.js:24005
(anonymous) @ compiler.js:23948
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents @ compiler.js:23948
(anonymous) @ compiler.js:23858
then @ compiler.js:1012
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents @ compiler.js:23857
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync @ compiler.js:23817
push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:143
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4344
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:76
0 @ main.ts:12
__webpack_require__ @ bootstrap:76
checkDeferredModules @ bootstrap:43
webpackJsonpCallback @ bootstrap:30
(anonymous) @ main.js:1

This error is only in browser, build does not show error.

What am I doing wrong? Thanks in advance.

Answer 1

This error usually occurs when you forget to import the Reactiveformsmodule in the module that you have left your component