Angular 15+ - Can't bind to 'formGroup' since it isn't a known property of 'form' even after adding in modules

Question

Event after declaring:

FormsModule,
ReactiveFormsModule,

in the feature module error still showing

home.component.html:

<p>home works!</p>
<div>
  <form [formGroup]="MyForm" (submit)="send()">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" />
    <br />
    <button type="submit">Submit</button>
  </form>
</div>

home.component.ts:

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  public MyForm!: FormGroup;
  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.MyForm = this.fb.group({
      productName: ['', [Validators.required]],
    })
  }

  public send() {
    console.log("FORM SUBMITED")
    console.log(this.MyForm.value)
  }
}

home.module.ts

@NgModule({
  declarations: [
    HomeComponent
  ],
  imports: [
    CommonModule,
    HomeRoutingModule,
    ReactiveFormsModule,
    FormsModule
  ]
})
export class HomeModule { }

home-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

I have followed this Can't bind to 'formGroup' since it isn't a known property of 'form'

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

EDIT: if I move the form in app.html, app.ts, app.module there is no error. but in a feature module there is.

small repo: https://github.com/ga2tes/AngularFormTest

I cannot see an error, please create a stackblitz to figure out what is missing. — Milan, Feb 24 '23 at 13:00
even i cannot replicate the error, please refer https://codesandbox.io/s/exciting-meninsky-4bliuc?file=/src/app/app.component.html — Aayush Mohta, Feb 24 '23 at 13:44
if you add the form on the main.module or app.module it's working fine, but if you add the form in feature module, there is an error. — Rajish Madhavaditya, Feb 24 '23 at 15:19

Matthieu Riegler · Accepted Answer · 2023-02-26T10:13:05.683

1

Your issue is lazy loading the HomeRoutingModule you should be loading the HomeModule.

In app-routing.module.ts:

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
  }
];

edited Feb 26 '23 at 10:13

answered Feb 25 '23 at 19:50

Matthieu Riegler

31,918
20
95
134

I did imported the `HomeRoutingModule` also imported `ReactiveFormsModule` & `FormsModule`. and still error `Can't bind to 'formGroup' since it isn't a known property of 'form'.` – Rajish Madhavaditya Feb 26 '23 at 09:52
Remove your `HomeRoutingModule` and import `HomeModule` containing what is above. – Matthieu Riegler Feb 26 '23 at 10:02
when I create module with routing like `ng generate m home --routing` it will create above code. is this not correct way of generating module with route? – Rajish Madhavaditya Feb 26 '23 at 10:08
1

My bad, see my edit. You lazy load the wrong module ! – Matthieu Riegler Feb 26 '23 at 10:13
oh thanks, so I should import the module & not the route-module XD. – Rajish Madhavaditya Feb 26 '23 at 10:23

Angular 15+ - Can't bind to 'formGroup' since it isn't a known property of 'form' even after adding in modules

1 Answers1