FormGroup isn't a known property of form

Question

I am creating a registration form and I'm getting the error that form group isn't a known property. I have other reactive forms and they all work but just this one. I added all the imports in app module and everything. Wondering if its because the registration page in in app/core/auth.

compiler.js:1021 Uncaught Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("<div class="container" style="margin-top: 40px;">
  <form [ERROR ->][formGroup]="registrationForm">

app.module.ts

imports: [
    FormsModule,
    ReactiveFormsModule
  ],

register.component.ts

import { RegistrationModel } from './../../../shared/models/registration.model';
import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import {FormBuilder, FormGroup, ReactiveFormsModule} from '@angular/forms';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {

  registrationForm: FormGroup;
  private registrationModel: RegistrationModel;

  constructor(private fb: FormBuilder) {
    this.registrationModel = new RegistrationModel;
  }

  ngOnInit() {
    this.registrationForm = this.fb.group({
      'first_name': [''],
      'middle_name': [''],
      'last_name': [''],
      'date_of_birth': [''],
    });
    this.registrationForm.valueChanges.subscribe(newVal => console.log(newVal));
  }
  onSubmit() {
    console.log(this.registrationForm);
  }
}

register html

<div class="container" style="margin-top: 40px;">
  <form [formGroup]="registrationForm">
    <div class="row">
      <div class="col-md-12">
        <h3 class="text-center">Register Account</h3>
        <hr>
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col-md-6">
        <label>First Name</label>
        <input type="text" class="form-control">
      </div>
      <div class="form-group col-md-6">
        <label>Middle Name</label>
        <input type="text" class="form-control">
      </div>
    </div>

Looks like you are importing the required module already. What's your project structure? Do you have another module for the component? — Maihan Nijat
`ngOnInit() { this.myForm = this.fb.group ({ // -- your form elements -- }); } — Lonely
@Slygoth Add your full module code and this will give us an idea about your project structure. — Maihan Nijat

Lonely Lonely · Accepted Answer · 2019-03-06T17:29:21

e.g. app.module.ts

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

then

@NgModule({
  imports: [
    // ...
    FormsModule,
    ReactiveFormsModule,
    // ...
  ],
  // ...
})

in your component

import {
  FormGroup,
  FormBuilder,
  FormArray,
  FormControl,
  Validators
} from '@angular/forms';
import { Component, OnInit } from '@angular/core';

within your component class:

export class MyFormWhatEverComponent implements OnInit {
// ...
myForm: FormGroup;
// ...

Constructor:

constructor(
    // ...
    private fb: FormBuilder,
    // ...
) {}

Then I have to create my formGroup:

buildMyForm () {
  this.myForm = this.fb.group({
    id: this.fb.control({ value: this.data.id }),
    // ...
  });
}

Last but not least think about initialization:

ngOnInit() {
    this.buildMyForm();
}

FormGroup isn't a known property of form

2 Answers