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

Viewed 10645

I am new in using Angular 4. I am trying to practice model driven forms in angular 4, But it keep getting this error.

Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'. (" ][formGroup] = "form" (ngSubmit)="onSubmit(form.value)"> "): ng:///ComponentsModule/AdsComponent.html@71:38 Error: Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'. (" ][formGroup] = "form" (ngSubmit)="onSubmit(form.value)">

I tried searching it for the issue on how to solve. Mostly the solution is by importing ReactiveFormsModule in the module. Here is the code in my component.ts

import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';

import { HttpClient, HttpErrorResponse } from '@angular/common/http';                                                                                                                                                           


@Component({
  templateUrl: 'ads.component.html'
})
export class AdsComponent {
    form;
    ngOnInit() {
        this.form = new FormGroup({
            ads_name: new FormControl("Hello Ads!")
        });
    } 

  constructor(
    private http: HttpClient
    ) {

   }

   onSubmit = function(user) {
        console.log(user);
   }

}

and here is the code in my component.html

<form class="form-horizontal" [formGroup] = "form" (ngSubmit)="onSubmit(form.value)">
   <div class="form-group row">
       <label class="col-md-3 form-control-label" for="ads_name">Ads Name</label>
       <div class="col-md-9">
           <input type="text" id="ads_name" name="ads_name" class="form-control" placeholder="Ads Name" formControlName="ads_name" ngModel>
       </div>
   </div>
</form>

and here is the code in my module

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

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    BsDropdownModule.forRoot(),
    TabsModule.forRoot(),
    ChartsModule,
    ReactiveFormsModule,
    HttpClientModule,
    FormsModule
  ],
3 Answers

There are obviously multiple solutions. This worked for me. Import the ReactiveFormsModule in app.module.ts

import { ReactiveFormsModule } from '@angular/forms';
Related