I'm new in angular 2 and i try to make a reactive form but i have some trouble. After many search in stack i found no solutions.
Here you can see my error
The code :
View :
<main>
<div class="container">
<h2>User data</h2>
<form [formGroup]="userForm">
<div class="form-group">
<label>name</label>
<input type="text" class="form-control" formControlName="name">
</div>
<div class="form-group">
<label>email</label>
<input type="text" class="form-control" formControlName="email">
</div>
<div class="" formGroupName="adresse">
<div class="form-group">
<label>Rue</label>
<input type="text" class="form-control" formControlName="rue">
</div>
<div class="form-group">
<label>Ville</label>
<input type="text" class="form-control" formControlName="ville">
</div>
<div class="form-group">
<label>Cp</label>
<input type="text" class="form-control" formControlName="cp">
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</main>
My module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { ContactComponent } from './contact.component';
import { FormGroup , FormControl , ReactiveFormsModule , FormsModule } from '@angular/forms';
@NgModule({
imports: [
NgModule,
BrowserModule,
FormsModule,
ReactiveFormsModule,
FormGroup,
FormControl
],
declarations: [
ContactComponent
]
})
export class ContactModule {}
And my component.ts
import {Component} from '@angular/core';
import { FormGroup , FormControl } from '@angular/forms';
@Component({
selector: 'contact',
templateUrl: './contact.component.html'
// styleUrls: ['../../app.component.css']
})
export class ContactComponent {
userForm = new FormGroup({
name: new FormControl(),
email: new FormControl(),
adresse: new FormGroup({
rue: new FormControl(),
ville: new FormControl(),
cp: new FormControl(),
})
});
}
I don't understand my error because import of ReactiveForm is here. So ... i need your help :) Thanks
After I read your answer and refactoring my code, it's ok, that works! The problem was i import reactive module in the module of my page contact and i need import this in module of my app. So thanks a lot for your interest :)
Hope this answer help another people guys.
This question is related to
angular
For those still struggling with the error, make sure that you also import ReactiveFormsModule in your component 's module.ts file
meaning that you will import your ReactiveFormsModule in your app.module.ts and also in your mycomponent.module.ts file
I had the same problem and I solved the problem in another way, without import ReactiveFormsModule. You may be but this block in
ngOnInt(){
userForm = new FormGroup({
name: new FormControl(),
email: new FormControl(),
adresse: new FormGroup({
rue: new FormControl(),
ville: new FormControl(),
cp: new FormControl(),
})
});
)
import the ReactiveForms Module to your components module
Try to add ReactiveFormsModule in your component as well.
import { FormGroup, FormArray, FormBuilder,
Validators,ReactiveFormsModule } from '@angular/forms';
I have solved it by importing FormModule in a shared.module and importing the shared.module in all other modules. My case is the FormModule is used in multiple modules.
try with
<form formGroup="userForm">
instead of
<form [formGroup]="userForm">
Don't use userForm = new FormGroup()
Use form = new FormGroup()
instead.
And in the form use <form [formGroup]="form"> ...</form>
. It works for me with angular 6
Source: Stackoverflow.com