Imansible eseguire il binding a “formGroup” poiché non è una proprietà nota di “form”

LA SITUAZIONE:

Per favore aiuto! Sto cercando di rendere quella che dovrebbe essere una forma molto semplice nella mia app Angular2 ma non importa quello che non funziona mai.

VERSIONE ANGOLARE:

Angular 2.0.0 Rc5

L’ERRORE:

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

inserisci la descrizione dell'immagine qui

IL CODICE:

La vista:

 

Il controller:

 import { Component } from '@angular/core'; import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'; import {FormsModule,ReactiveFormsModule} from '@angular/forms'; import { Task } from './task'; @Component({ selector: 'task-add', templateUrl: 'app/task-add.component.html' }) export class TaskAddComponent { newTaskForm: FormGroup; constructor(fb: FormBuilder) { this.newTaskForm = fb.group({ name: ["", Validators.required] }); } createNewTask() { console.log(this.newTaskForm.value) } } 

Il ngModule:

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { routing } from './app.routing'; import { AppComponent } from './app.component'; import { TaskService } from './task.service' @NgModule({ imports: [ BrowserModule, routing, FormsModule ], declarations: [ AppComponent ], providers: [ TaskService ], bootstrap: [ AppComponent ] }) export class AppModule { } 

LA DOMANDA:

Perché sto ricevendo quell’errore?

Mi sto perdendo qualcosa?

RC5 FIX

Devi import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms' nel tuo controller e aggiungerlo alle directives in @Component . Questo risolverà il problema.

Dopo averlo risolto, probabilmente riceverai un altro errore perché non hai aggiunto formControlName="name" al tuo input nel modulo.

RC6 / RC7 / Versione finale FIX

Per correggere questo errore, è sufficiente importare ReactiveFormsModule da @angular/forms nel modulo. Ecco l’esempio di un modulo base con importazione ReactiveFormsModule :

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, FormsModule, ReactiveFormsModule ], declarations: [ AppComponent ], bootstrap: [AppComponent] }) export class AppModule { } 

Per spiegare ulteriormente, formGroup è un selettore per direttiva denominato FormGroupDirective che è una parte di ReactiveFormsModule , quindi la necessità di importarlo. Viene utilizzato per associare un FormGroup esistente a un elemento DOM. Puoi leggere ulteriori informazioni sulla pagina dei documenti ufficiali di Angular .

Angular 4 in combinazione con i moduli feature (se si utilizza ad esempio un modulo condiviso) richiede anche l’esportazione di ReactiveFormsModule per funzionare.

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @NgModule({ imports: [ CommonModule, ReactiveFormsModule ], declarations: [], exports: [ CommonModule, FormsModule, ReactiveFormsModule ] }) export class SharedModule { } 

Ok dopo un po ‘di ricerca ho trovato una soluzione per “Non posso associare a’ formGroup ‘poiché non è una proprietà conosciuta di’ form ‘.”

Per il mio caso, ho utilizzato più file di moduli, ho aggiunto ReactiveFormsModule in app.module.ts

  import { FormsModule, ReactiveFormsModule } from '@angular/forms';` @NgModule({ declarations: [ AppComponent, ] imports: [ FormsModule, ReactiveFormsModule, AuthorModule, ], ... 

Ma questo non funzionava quando uso una direttiva [formGroup] da un componente aggiunto in un altro modulo, ad esempio usando [formGroup] in author.component.ts che è sottoscritto nel file author.module.ts:

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { AuthorComponent } from './author.component'; @NgModule({ imports: [ CommonModule, ], declarations: [ AuthorComponent, ], providers: [...] }) export class AuthorModule {} 

Ho pensato che se avessi aggiunto ReactiveFormsModule in app.module.ts, per impostazione predefinita ReactiveFormsModule sarebbe stato ereditato da tutti i suoi moduli figli come author.module in questo caso … (sbagliato!). Avevo bisogno di importare ReactiveFormsModule in author.module.ts per far funzionare tutte le direttive:

 ... import { FormsModule, ReactiveFormsModule } from '@angular/forms'; ... @NgModule({ imports: [ ..., FormsModule, //added here too ReactiveFormsModule //added here too ], declarations: [...], providers: [...] }) export class AuthorModule {} 

Quindi, se stai usando i sottomoduli, assicurati di importare ReactiveFormsModule in ogni file di sottomodulo. Spero che questo aiuti chiunque.

La risposta suggerita non ha funzionato per me con Angular 4. Invece ho dovuto usare un altro modo di attribuire il binding con il attr :

  

Se hai due moduli, aggiungi come questo

 import {ReactiveFormsModule,FormsModule} from '@angular/forms'; @NgModule({ declarations: [ AppComponent, HomeComponentComponent, BlogComponentComponent, ContactComponentComponent, HeaderComponentComponent, FooterComponentComponent, RegisterComponent, LoginComponent ], imports: [ BrowserModule, FormsModule, HttpModule, routes, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) 

Tieni presente che se hai definito “moduli funzione”, dovrai importarlo nel modulo funzione, anche se l’hai già importato su AppModule . Dalla documentazione Angular:

I moduli non ereditano l’accesso ai componenti, alle direttive o alle pipe dichiarate in altri moduli. Quali importazioni di AppModule sono irrilevanti per ContactModule e viceversa. Prima che ContactComponent possa eseguire il binding con [(ngModel)], ContactModule deve importare FormsModule.

https://angular.io/docs/ts/latest/guide/ngmodule.html

Ho riscontrato questo errore durante il test dell’unità di un componente (solo durante il test, all’interno dell’applicazione funzionava normalmente). La soluzione è di importare ReactiveFormsModule nel file .spec.ts :

 // Import module import { ReactiveFormsModule } from '@angular/forms'; describe('MyComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [MyComponent], imports: [ReactiveFormsModule], // Also add it to 'imports' array }) .compileComponents(); })); }); 

Per le persone che passeggiano queste discussioni su questo errore. Nel mio caso ho avuto un modulo condiviso in cui ho esportato solo FormsModule e ReactiveFormsModule e ho dimenticato di importarlo. Ciò ha causato uno strano errore che i formgroup non funzionavano nei sotto componenti. Spero che questo aiuti le persone a grattarsi la testa.

Questo problema si verifica a causa dell’importazione mancante di FormsModule, ReactiveFormsModule. Ho anche avuto lo stesso problema. Il mio caso era diff. come stavo lavorando con i moduli. Così ho perso sopra le importazioni nei miei moduli genitore anche se l’avevo importato in moduli figlio, non funzionava.

Poi l’ho importato nei miei moduli genitori come sotto, e ha funzionato!

 import { ReactiveFormsModule,FormsModule } from '@angular/forms'; import { AlertModule } from 'ngx-bootstrap'; @NgModule({ imports: [ CommonModule, FormsModule, ReactiveFormsModule, ], declarations: [MyComponent] }) 

Mi sono imbattuto in questo errore quando ho provato a fare test e2e e mi faceva impazzire il fatto che non ci fossero risposte a questo.

SE STAI FACENDO TEST, trova il tuo file * .specs.ts e aggiungi:

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

UNA PICCOLA NOTA: fai attenzione ai caricatori e riduci a icona (Rails env.):

Dopo aver visto questo errore e aver provato ogni soluzione, ho capito che c’era qualcosa di sbagliato nel mio caricatore html.

Ho impostato il mio ambiente Rails per importare correttamente i percorsi HTML per i miei componenti con questo loader ( config/loaders/html.js. ):

 module.exports = { test: /\.html$/, use: [ { loader: 'html-loader?exportAsEs6Default', options: { minimize: true } }] } 

Dopo alcune ore di sforzi e innumerevoli importazioni di ReactiveFormsModule ho visto che il mio formGroup era minuscolo: formgroup .

Questo mi ha portato al caricatore e il fatto che abbia ridimensionato il mio codice HTML al minimo.

Dopo aver cambiato le opzioni, tutto ha funzionato come dovrebbe, e potrei tornare a piangere di nuovo.

So che questa non è una risposta alla domanda, ma per i futuri visitatori di Rails (e altri con caricatori personalizzati) penso che ciò potrebbe essere d’aiuto.

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

significa che provi a bind una proprietà usando angular ( [prop] ) ma non riesci a trovare nulla che sappia per quell’elemento (in questo caso il form ).

questo può accadere non usando il modulo giusto (manca un’importazione da qualche parte nel modo) e qualche volta causano solo errori di battitura come:

[formsGroup] , con s dopo la form