Search code examples
angulartypescriptformgroupsangular11

Problem when binding to 'formGroup' on Angular11


I'm developing a Angular11 project for homework, and I'm trying to save data to my Cloud Firestore with a form using some bootstrap, but when I launch the app, it says the following:

error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.

  <form class="mt-4" [formGroup]="createProducto" (ngSubmit)="agregarProducto()">
                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/components/add-productos.component.ts:9:16
    9   templateUrl: '../views/add-productos.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AddProductosComponent.

Here is where I have the problem

<form class="mt-4" [formGroup]="createProducto" (ngSubmit)="agregarProducto()">

Here are my imports on my component:

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ProductoService } from '../services/producto.service'
import { Router, ActivatedRoute } from '@angular/router';
import { ToastrService } from 'ngx-toastr';

And here is where I create the "createProducto: FormGroup"m which should work with no problems

export class AddProductosComponent implements OnInit {
  createProducto: FormGroup
  submitted = false

I have already tried some things people have posted here, but none of them work for me.


Solution

  • I fixed the error by importing ReactiveFormsModule, FormsModule in my AddProductosComponent.