[Erreur] Can't bind to 'formGroup'

Bonjour les pros Angular

Aujourd'hui une mésaventure bizarre
Ma compilation échoue sur cette ligne : je récupère un "

Citation:

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

Code:

<form [formGroup] ="userForm" (ngSubmit)="onSubmit()">

A force de bidouiller j'ai enlevé les crochets de formGroup et là j'ai pu compiler à nouveau...

Code:

<form formGroup="userForm" (ngSubmit)="onSubmit()">

Si quelqu'un peut m'expliquer:whistle: merci !

t'as pas oublié un truc ?

ReactiveFormsModule :mouarf::mouarf:

donc remettre les crochets !

En fait j'ai mis le ReactivFormModule dans le app comme ceci dès le début

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
 
import { AppComponent } from './app.component';
import { MonPremierComponent } from './mon-premier/mon-premier.component';
import { AppareilComponent } from './appareil/appareil.component';
import { SingleAppareilComponent } from './single-appareil/single-appareil.component';
import { AuthComponent } from './auth/auth.component';
import { AppareilViewComponent } from './appareil-view/appareil-view.component';
import { FourOFourComponent } from './four-o-four/four-o-four.component';
import { EditAppareilComponent } from './edit-appareil/edit-appareil.component';
import { UserListComponent } from './user-list/user-list.component';
 
import { AuthService } from './services/auth.service';
import { AppareilService } from './services/appareil.service';
import { AuthGuard } from './services/auth-gard.service';
import { UserService } from './services/user.service';
import { NewUserComponent } from './new-user/new-user.component';
 
 
const appRoutes: Routes = [
  {path:'allAppareils', canActivate: [AuthGuard], component: AppareilViewComponent},
  {path:'allAppareils/:toto', canActivate: [AuthGuard], component: SingleAppareilComponent},
  {path:'auth', component: AuthComponent},
  {path:'userList', component: UserListComponent},
  {path:'userForm', canActivate: [AuthGuard], component: NewUserComponent},
  {path:'formAppareil', canActivate: [AuthGuard], component: EditAppareilComponent},
  {path:'', component: AppareilViewComponent},//localhost 4200 accueil qui affiche les appareils
  {path:'notFound', component: FourOFourComponent},
  {path:'**', redirectTo: '/notFound'},
];
 
@NgModule({
  declarations: [
    AppComponent,
    MonPremierComponent,
    AppareilComponent,
    AuthComponent,
    AppareilViewComponent,
    SingleAppareilComponent,
    FourOFourComponent,
    EditAppareilComponent,
    UserListComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot(appRoutes)//gère le routing
  ],
  providers: [
    AppareilService,
    AuthService,
    AuthGuard,
    UserService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

puis dans le controller spécifique :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { User } from '../models/User.model';
import { UserService } from '../services/user.service';
 
@Component({
  selector: 'app-new-user',
  templateUrl: './new-user.component.html',
  styleUrls: ['./new-user.component.css']
})

Il y a autre chose qui m'échappe ?

EDIT// Resolu sans trop comprendre comment après avoir redémarré mon PC...

quand tu manipules les modules, c'est mieux de relancer le ng serve !

Bon à savoir ça, merci à toi.