Impossibile associare "formGroup" poiché non è una proprietà nota di "form"

LA SITUAZIONE:

Per favore aiuto! Sto cercando di creare quella che dovrebbe essere una forma molto semplice nella mia app Angular2, ma non importa cosa non funzioni mai.

VERSIONE ANGOLARE:

Angolare 2.0.0 Rc5

L'ERRORE:

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

IL CODICE:

La vista:

<form [formGroup]="newTaskForm" (submit)="createNewTask()">
   <div class="form-group">
      <label for="name">Name</label>
      <input type="text" name="name" required>
   </div>
   <button type="submit" class="btn btn-default">Submit</button>
</form>

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é ricevo questo errore?

Mi sto perdendo qualcosa?

RC5 FIX

È necessario import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'nel controller e aggiungerlo a directivesin @Component. Ciò risolverà il problema.

Dopo aver risolto ciò, probabilmente otterrai un altro errore perché non hai aggiunto formControlName="name"al tuo input nel modulo.

FIX RC6 / RC7 / Final release

Per correggere questo errore, devi solo importare ReactiveFormsModuledal @angular/formstuo modulo. Ecco l'esempio di un modulo di base con ReactiveFormsModuleimportazione:

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 la direttiva denominata di FormGroupDirectivecui fa parte ReactiveFormsModule, quindi la necessità di importarlo. Viene utilizzato per associare un esistente FormGroupa un elemento DOM. Puoi leggere di più a riguardo nella pagina dei documenti ufficiali di Angular .

L'angolo 4 in combinazione con i moduli funzione (se ad esempio si utilizza un modulo condiviso) richiede di esportare anche il ReactiveFormsModulelavoro.

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 aver scavato, ho trovato una soluzione per "Impossibile associare 'formGroup' poiché non è una proprietà nota di 'form'."

Nel 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 utilizzo una direttiva [formGroup] da un componente aggiunto in un altro modulo, ad esempio utilizzando [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 figlio 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 {}

Pertanto, se si utilizzano sottomoduli, assicurarsi di importare ReactiveFormsModule in ciascun file di sottomodulo. Spero che questo aiuti chiunque.

Ho riscontrato questo errore durante il test dell'unità di un componente (solo durante il test, all'interno dell'applicazione ha funzionato normalmente). La soluzione è importare ReactiveFormsModulenel .spec.tsfile:

// Import module
import { ReactiveFormsModule } from '@angular/forms';

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

La risposta suggerita non ha funzionato per me con Angular 4. Invece ho dovuto usare un altro modo di legare gli attributi con il attrprefisso:

<element [attr.attribute-to-bind]="someValue">

Se devi importare due moduli, aggiungi come segue di seguito

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 importare nel Modulo funzionalità, anche se hai già importato in AppModule. Dalla documentazione angolare:

I moduli non ereditano l'accesso ai componenti, alle direttive o alle pipe dichiarati in altri moduli. Cosa importa AppModule è irrilevante per ContactModule e viceversa. Prima che ContactComponent possa eseguire il bind con [(ngModel)], ContactModule deve importare FormsModule.

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

L'errore dice che FormGroup non è riconosciuto in questo modulo. Quindi devi importare questi (sotto) moduli in ogni modulo che utilizza FormGroup

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

Quindi aggiungi FormsModule e ReactiveFormsModule nella matrice delle importazioni del tuo modulo .

imports: [
  FormsModule,
  ReactiveFormsModule
],

Potresti pensare che l'ho già aggiunto in AppModule e che dovrebbe ereditare da esso? Ma non è. perché questi moduli stanno esportando le direttive richieste che sono disponibili solo nei moduli di importazione. Leggi di più qui ... https://angular.io/guide/sharing-ngmodules .

Altri fattori per questi errori possono essere errori di ortografia come di seguito ...

[FormGroup] = "form" F maiuscola anziché piccola f

[formsGroup] = "forma" Extra s dopo la forma

Ho avuto lo stesso problema con Angular 7. Basta importare quanto segue nel file app.module.ts.

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

Quindi aggiungi FormsModule e ReactiveFormsModule al tuo array di importazioni.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Questo problema si verifica a causa della mancata importazione di FormsModule, ReactiveFormsModule. Ho anche avuto lo stesso problema. Il mio caso era diff. mentre stavo lavorando con i moduli. Quindi ho perso le importazioni superiori nei miei moduli genitore sebbene lo avessi importato in moduli figlio, non funzionava.

Poi l'ho importato nei miei moduli genitore come di seguito, e ha funzionato!

import { ReactiveFormsModule,FormsModule  } from '@angular/forms';
import { AlertModule } from 'ngx-bootstrap';

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

Per le persone che passeggiano su questi thread su questo errore. Nel mio caso avevo 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 sottocomponenti. Spero che questo aiuti le persone a grattarsi la testa.

Mi sono imbattuto in questo errore quando ho provato a fare test e2e e mi stava facendo impazzire che non c'erano risposte a questo.

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

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

UNA PICCOLA NOTA: fai attenzione ai caricatori e minimizza (Rails env.):

Dopo aver visto questo errore e aver provato tutte le soluzioni là fuori, mi sono reso conto che c'era qualcosa di sbagliato nel mio caricatore HTML.

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

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

Dopo alcuni sforzi ore e innumerevoli importazioni ReactiveFormsModule ho visto che la mia formGroupera piccola lettere: formgroup.

Questo mi ha portato al caricatore e il fatto che ha minimizzato il mio HTML su minimizzare.

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ò possa essere utile.

utilizzo e importazione di REACTIVE_FORM_DIRECTIVES :

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 { }

Se si verifica questo problema durante lo sviluppo di un componente, è necessario aggiungere questi due moduli al modulo più vicino:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
   // other modules
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

E se stai sviluppando un test per i tuoi componenti, dovresti aggiungere questo modulo al tuo file di test in questo modo:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ContactusComponent } from './contactus.component';
import { ReactiveFormsModule } from '@angular/forms';

describe('ContactusComponent', () => {
  let component: ContactusComponent;
  let fixture: ComponentFixture<ContactusComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ContactusComponent],
      imports:[
        ReactiveFormsModule
      ]

    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ContactusComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Importa ReactiveFormsModule nel modulo corrispondente

Soluzione semplice:

passaggio 1: importare ReactiveFormModule

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

passaggio 2: aggiungere "ReactiveFormsModule" alla sezione di importazione

imports: [

    ReactiveFormsModule
  ]

Passaggio 3: riavvia App e Fine

Esempio :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {ReactiveFormsModule} from '@angular/forms';
import { EscalationManagementRoutingModule } from './escalation-management-routing.module';
import { EscalationManagementRouteWrapperComponent } from './escalation-management-route-wrapper.component';


@NgModule({
  declarations: [EscalationManagementRouteWrapperComponent],
  imports: [
    CommonModule,
    EscalationManagementRoutingModule,
    ReactiveFormsModule
  ]
})
export class EscalationManagementModule { }

Importa e registra ReactiveFormsModule in app.module.ts.

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

@NgModule({
declarations: [
AppComponent,
HighlightDirective,
TestPipeComponent,
ExpoentialStrengthPipe

],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Assicurati che l'ortografia sia corretta nei file .ts e .html. xxx.ts

  profileForm = new FormGroup({
  firstName: new FormControl(''),
 lastName: new FormControl('')
 });

file xxx.html

  <form [formGroup]="profileForm"> 
  <label>
  First Name:
   <input type="text" formControlName = "firstName">
  </label>

  <label>
  Last Name:
   <input type="text" formControlName = "lastName">
   </label>
   </form>

Sono stato per errore scritto [FormGroup] istinto di [formGroup]. Controlla correttamente l'ortografia in .html. Non genera errori di compilazione Se qualcosa non va nel file .html.

Nota : se stai lavorando all'interno del componente del modulo figlio, devi solo importare ReactiveFormsModule nel modulo figlio anziché nel modulo radice dell'app padre

Non essere stupido come me. Stava ottenendo lo stesso errore di cui sopra, NESSUNO delle opzioni in questo thread ha funzionato. Poi mi sono reso conto di aver maiuscolato la 'F' in FormGroup. Doh!

Invece di:

[FormGroup]="form"

Fare:

[formGroup]="form"

se questo è solo un errore dattiloscritto ma tutto nel modulo funziona, potrebbe essere necessario riavviare l'IDE

Ho avuto lo stesso problema, assicurandomi che se utilizzi i sottomoduli (ad esempio, non hai solo app.component.module.ts, ma hai un componente separato come login.module.ts, che includi l'importazione ReactiveFormsModule in questo accesso .module.ts import, perché funzioni. Non devo nemmeno importare ReactiveFormsModule nel mio app.component.module perché sto usando i sottomoduli per tutto.

login.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { LoginPageRoutingModule } from './login-routing.module';

import { LoginPage } from './login.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    LoginPageRoutingModule
  ],
  declarations: [LoginPage]
})
export class LoginPageModule {}

Potrebbe aiutare qualcuno:

quando si dispone di un formGroup in un modale (entrycomponent), è necessario importare ReactiveFormsModule anche nel modulo in cui il modal è istanziato.

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

significa che si tenta di associare una proprietà usando angular ( [prop]) ma angular non riesce a trovare tutto ciò che sa per quell'elemento (in questo caso form).

questo può accadere non usando il modulo giusto (mancando un'importazione da qualche parte) e talvolta causando un errore di battitura come:

[formsGroup], con sdopoform

La mia soluzione era sottile e non la vedevo già elencata.

Stavo usando forme reattive in un componente della finestra di dialogo Materiali angolari che non era stato dichiarato app.module.ts. Il componente principale è stato dichiarato in app.module.tse aprirebbe il componente dialog, ma il componente dialog non è stato dichiarato esplicitamente in app.module.ts.

Non ho avuto alcun problema nell'utilizzare normalmente il componente dialog, tranne che il modulo ha generato questo errore ogni volta che ho aperto la finestra.

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

Innanzitutto, non è correlato alle versioni angolari> 2 . Basta importare quanto segue nel file app.module.ts per risolvere i problemi.

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

Quindi aggiungi FormsModule e ReactiveFormsModule al tuo array di importazioni.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Nota : è anche possibile importare ReactiveFormsModulein un modulo specifico anziché inapp.module.ts

Una volta ho aggiunto il mio modulo a AppModuletutto ha iniziato a funzionare bene.