CODEWITHSUNDEEP
angularangular-reactive-formsformgroups
Slygoth
Slygoth

Reputation: 333

FormGroup isn't a known property of form

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>

Upvotes: 0

Views: 6879

Answers (2)

Maihan Nijat
Maihan Nijat

Reputation: 9344

And make sure you are importing the required modules from right source and make sure to import it in another module if you are using it for register component. Multiple modules could cause this error. You need to import it this in your relevant modules.

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

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

And you do not need to import ReactiveFormsModule in your component.

Upvotes: 0

user3025289
user3025289

Reputation:

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();
}

Upvotes: 2

Related Questions