Can't bind to 'formGroup' since it isn't a known property of 'form' in Angular 8

Question

Unable to solve Can't bind to formGroup since it isn't a known property of form.

I have already tried all the solutions already add ReactiveFormsModule , FormsModule also tried [formGroup] and [FormGroup] still getting the same error

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

 imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
  ]

my form

<form [formGroup]="addPostForm" (ngSubmit)="addNewPost()">
     <ion-item>
          <ion-label class="grey" position="stacked">Caption </ion-label>
          <ion-input type="text" formControlName="caption"></ion-input>
     </ion-item>
     <ion-button expand="block" type="submit" shape="round">Save</ion-button>
</form>

add-post.page.ts

import { Component, OnInit } from '@angular/core';
import { IonSlides } from '@ionic/angular';
import { ApiService } from '../services/api.service';
import { Router } from "@angular/router"
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';


@Component({
  selector: 'app-add-post',
  templateUrl: './add-post.page.html',
  styleUrls: ['./add-post.page.scss'],
})
export class AddPostPage implements OnInit {

    addPostForm: FormGroup;
    picture = null;
    submitted = false;
    success = false;

    constructor(
        private api: ApiService,
        private FormBuilder: FormBuilder,
        private router: Router,
    ) {
        this.addPostForm = this.FormBuilder.group({
            caption: ['']
        });
    }

Error

Refer to this link https://stackoverflow.com/questions/39152071/cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form — rdr20, Mar 01 '21 at 08:50
try to refer to this link too, perhaps it will help -> [stackblitz](https://stackblitz.com/edit/ionic-v4-mv8f7l?file=src%2Fapp%2Fapp.module.ts) — Nicho, Mar 01 '21 at 09:23

score 0 · Answer 1 · answered Mar 01 '21 at 04:40

0

In your component.ts file (the component.ts file for which the form code above has it in the HTML page), please initiate the form

Something like this:

addPostForm: FormGroup = new FormGroup({
  caption: new FormControl('', [Validators.required]) // If validators are required, otherwise you can remove the [Validators.required] part.
});

answered Mar 01 '21 at 04:40

Srikar Phani Kumar M

1,069
1
3
8

I had made a mistake adding the component.ts file I had already declared my form. – Pratik Solanki Mar 01 '21 at 06:50

Aman Gojariya · Accepted Answer · 2021-03-02T04:33:45.850

You need to setup form in app.component.ts file. Please refer below code for the same,

import { Component } from '@angular/core';
import { AuthenticationService } from './services/authentication.service';
import { Router } from '@angular/router';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  navigate : any;
  //Need to define addPostForm here.
  addPostForm = new FormGroup({
    caption: new FormControl('')
  });
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private authenticationService: AuthenticationService,
    private router: Router
  ) {
    this.sideMenu();
    this.initializeApp();
  }

For more reference please refer this angular docs for reactive forms.

Note: If your component is imported in another module then in other module you need to import ReactiveFormsModule in this module.

sorry by mistake I shared app.component.ts I have already declared form in add-post.page.ts — Pratik Solanki, Mar 01 '21 at 06:51
Okay no problem. Now can you please tell me Are you used any module. It means your component is defined in app.module.ts or any other module? — Aman Gojariya, Mar 01 '21 at 09:15
thanks for the help I hadn't Imported ReactiveFormsModule in my add-post.module.ts which is needed. — Pratik Solanki, Mar 01 '21 at 10:45
You're welcome I have changed my answer please mark as right if your problem is solved. — Aman Gojariya, Mar 02 '21 at 04:35

Can't bind to 'formGroup' since it isn't a known property of 'form' in Angular 8

2 Answers2

Linked