angular - Kan niet binden aan ‘formGroup’ omdat het geen bekende eigenschap van ‘form’ is

DE SITUATIE:

Help alstublieft! Ik probeer een heel eenvoudig formulier te maken in mijn Angular2-app, maar het werkt nooit.

HOEKIGE VERSIE:

Hoek 2.0.0 Rc5

DE FOUT:

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

DE CODE:

Het uitzicht:

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

De 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)
    } 
}

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

De vraag:

Waarom krijg ik die fout?

Mis ik iets?

Antwoord 1, Autoriteit 100%

RC5 fix

U moet import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'in uw controller en voeg deze toe aan directivesin @Component. Dat zal het probleem oplossen.

Nadat u dat hebt opgelost, krijgt u waarschijnlijk nog een fout omdat u formControlName="name"niet hebt toegevoegd aan uw invoer in formulier.

RC6 / RC7 / FINAL RELEASE FIX

Om deze fout op te lossen, moet u alleen ReactiveFormsModulevan @angular/formsin uw module. Dit is het voorbeeld van een basismodule met ReactiveFormsModuleimporteren:

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

Om verder te verklaren, formgroupis een keuzemogelijkheid voor de richtlijn met de naam FormGroupDirectivedat is een deel van ReactiveFormsModule, vandaar de noodzaak om het te importeren. Het wordt gebruikt om een bestaande formgroupeen DOM-element binden. U kunt er meer over lezen op Angular officiële documenten .

Antwoord 2, Autoriteit 11%

Angular 4 in combinatie met functie modules (als je bijvoorbeeld met behulp van een gedeelde-module) vereist dat u ook de uitvoer van de ReactiveFormsModuleaan het werk.

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

Antwoord 3, Autoriteit 9%

Ok na wat het graven vond ik een oplossing voor “Kan niet binden aan ‘formGroup’, omdat het niet een bekende eigenschap van ‘vorm’.”

Voor mijn geval, ik ben geweest het gebruik van meerdere modules bestanden, ik ReactiveFormsModule in app.module.ts toegevoegd

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

Maar dit werkte niet wanneer ik een [formgroup] -richtlijn gebruik van een component toegevoegd in een andere module, b.v. [FormGroup] gebruiken in auteur.ponent.ts die is ingeschreven in auteur.module.ts-bestand:

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

Ik dacht dat als ik reactiefformsmodule in app.module.ts heeft toegevoegd, standaard reactiefformsmodule zou worden geërfd door al zijn kindermodules zoals auteur.module in dit geval … (verkeerd!).
Ik moest reactiefformsmodule importeren in auteur.module.ts om alle richtlijnen te laten werken:

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

Dus, als u submodules gebruikt, moet u reactiefformsmodule importeren in elk submodule-bestand.
Ik hoop dat dit iedereen helpt.

Antwoord 4, Autoriteit 4%

Ik ben deze fout aangemeld tijdens eenheidstests van een component (alleen tijdens het testen, binnen toepassing die het normaal werkte). De oplossing is om te importeren ReactiveFormsModulein .spec.tsbestand:

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

Antwoord 5, autoriteit 2%

Het voorgestelde antwoord werkte niet voor mij met Angular 4. In plaats daarvan moest ik een andere manier van attribuut bindingmet het voorvoegsel attr:

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

Antwoord 6

De fout zegt dat FormGroup niet wordt herkend in deze module. U moet deze (hieronder) modules dus importeren in elke moduledie gebruikmaakt van FormGroup

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

Voeg vervolgens FormsModule en ReactiveFormsModule toe aan de importarray van uw Module.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Je denkt misschien dat ik het al heb toegevoegd in AppModuleen dat het het zou moeten erven? Maar het is niet. omdat deze modules vereiste richtlijnen exporteren die alleen beschikbaar zijn in importmodules. Lees hier meer… https://angular.io/guide/sharing-ngmodules.

Andere factoren voor deze fouten kunnen een spelfout zijn zoals hieronder…

[FormGroup]=”form”Hoofdletter Fin plaats van kleine f

[formsGroup]=”form”Extra sna formulier

Antwoord 7

Als je twee modules moet importeren, voeg dan hieronder toe

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]
})

Antwoord 8

Houd er rekening mee dat als je “Feature Modules” hebt gedefinieerd, je moet importeren in de Feature Module, zelfs als je al hebt geïmporteerd in de AppModule. Uit de Angular-documentatie:

Modules erven geen toegang tot de componenten, richtlijnen of pijpen die in andere modules zijn gedeclareerd. Wat AppModule importeert is niet relevant voor ContactModule en vice versa. Voordat ContactComponent kan binden met [(ngModel)], moet de ContactModule FormsModule importeren.

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

Antwoord 9

Ik had hetzelfde probleem met Angular 7. Importeer gewoon het volgende in je app.module.ts-bestand.

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

Voeg vervolgens FormsModule en ReactiveFormsModule toe aan uw importarray.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Antwoord 10

Dit probleem treedt op vanwege het ontbreken van import van FormsModule,ReactiveFormsModule. Ik kwam ook met hetzelfde probleem.
Mijn geval was anders. terwijl ik met modules werkte. Dus ik miste bovenstaande imports in mijn bovenliggende modules, hoewel ik het in onderliggende modules had geïmporteerd, werkte het niet.

Vervolgens importeerde ik het in mijn bovenliggende modules zoals hieronder, en het werkte!

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

Antwoord 11

Ik kwam deze fout tegen toen ik e2e-testen probeerde uit te voeren en ik werd er gek van dat hier geen antwoorden op waren.

ALS U TESTEN DOET, zoekt u uw *.specs.ts-bestanden voegt u :

toe

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

Antwoord 12

Voor mensen die door deze threads slenteren over deze fout. In mijn geval had ik een gedeelde module waar ik alleen de FormsModule en ReactiveFormsModule exporteerde en vergat deze te importeren. Dit veroorzaakte een vreemde fout dat formuliergroepen niet werkten in subcomponenten. Ik hoop dat dit mensen helpt hun hoofd te krabben.

Antwoord 13

Wees niet zo dom als ik. Kreeg dezelfde fout als hierboven, GEEN van de opties in deze thread werkte. Toen realiseerde ik me dat ik ‘F’ met een hoofdletter had geschreven in formgroup. Doh!

In plaats van:

[formGroup]="form"

Doe:

[formGroup]="form"

Antwoord 14

EEN KLEINE OPMERKING: wees voorzichtig met laders en minimaliseer (Rails env.):

Na het zien van deze fout en het proberen van elke oplossing die er is, realiseerde ik me dat er iets mis was met mijn html-lader.

Ik heb mijn Rails-omgeving ingesteld om HTML-paden voor mijn componenten succesvol te importeren met deze lader (config/loaders/html.js.):

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

Na enkele uren inspanningen en talloze invoer van ReactiveFormsModule zag ik dat mijn formgroupuit kleine letters bestond: formgroup.

Dit leidde me naar de lader en het feit dat het mijn HTML verkleinde bij minimaliseren.

Na het wijzigen van de opties werkte alles zoals het zou moeten en kon ik weer gaan huilen.

Ik weet dat dit geen antwoord op de vraag is, maar voor toekomstige Rails-bezoekers (en anderen met aangepaste laders) denk ik dat dit nuttig kan zijn.

Antwoord 15

Importeer en registreer ReactiveFormsModule in uw app.module.ts.

import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
HighlightDirective,
TestPipeComponent,
ExpoentialStrengthPipe
],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Zorg ervoor dat uw spelling correct is in zowel het .ts- als het .html-bestand.
xxx.ts

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

xxx.html bestand-

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

Ik heb per ongeluk [FormGroup] geschreven in plaats van [formGroup]. Controleer uw spelling correct in .html. Het geeft geen compilatiefout als er iets mis is in het .html-bestand.

Antwoord 16

REACTIVE_FORM_DIRECTIVESgebruiken en importeren:

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

Antwoord 17

Als u dit probleem ondervindt bij het ontwikkelen van een component, moet u deze twee modules toevoegen aan uw dichtstbijzijnde module:

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

En als u een test voor uw componenten ontwikkelt, dus moet u deze module toevoegen aan uw testbestand zoals deze:

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

Antwoord 18

Import reactiefformsmodule in de overeengekomen module

Antwoord 19

Ik had hetzelfde probleem, zorg ervoor dat als het gebruik van submodules (bijvoorbeeld, u niet alleen app.component.module.ts hebt, maar u hebt een apart onderdeel zoals login.module. TS, die u opneemt in dit login.module.ts importeren, om te werken. Ik hoef niet eens reactiefformsmodule in mijn app.component.module te importeren, omdat ik submodules gebruik voor alles.

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

Antwoord 20

eenvoudige oplossing:

Stap 1: Import ReactiveFormModule

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

Stap 2: Voeg “Reactiefformsmodule” toe aan het importeren van sectie

imports: [
    ReactiveFormsModule
  ]

Stap 3: HERSTART-app en voltooid

Voorbeeld:

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

Antwoord 21

kan iemand helpen:

Wanneer u een formgroup in een modaal (entrycomponent) hebt, moet u reactiefformsmodule ook in de module importeren waarin de modal wordt geïnstantieerd.

Antwoord 22

Opmerking:als u in de component van de onderliggende module werkt, hoeft u alleen ReactiveFormsModulein de onderliggende module te importeren in plaats van de hoofdmodule van de bovenliggende app.

Antwoord 23

als dit gewoon een typfout is, maar alles op je formulier werkt, moet je misschien je IDE opnieuw opstarten

Antwoord 24

Uw Angular-versie is 11+ en u gebruikt VisualStudioCode?
En je hebt al FormsModule, ReactiveFormsModulegeïmporteerd en toegevoegd aan je import-sectie binnen app.module.ts:

// app.module.ts (excerpt)
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
imports: [
  ...
  FormsModule,
  ReactiveFormsModule,
  ...
],

En je hebt de juiste imports (soms zijn er andere bibliotheken met vergelijkbare namen), je hebt je formulier gedefinieerd en geïnitialiseerd in je component?

// MyWonderfulComponent (excerpt)
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class MyWonderfulComponent implements OnInit {
  form: FormGroup; 
  ...
  constructor (private fb: FormBuilder) {
    this.form = this.fb.group({
      // DON'T FORGET THE FORM INITIALISATION
    });
  }

Uw Component-Template heeft uw formulier:

<form [formGroup]="form" (ngSubmit)="submit()">
  <!-- MY FORM CONTROLS ARE ALREADY HERE --> 
</form>

En je krijgt nog steeds de foutmelding “…sinds het geen bekende eigenschap is van…” ?

start dan gewoon je VisualStudioCode opnieuw op 🙂

Antwoord 25

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

betekent dat je probeert een eigenschap te binden met angular ([prop]), maar angular kan niets vinden dat hij weet voor dat element (in dit geval form).

dit kan gebeuren door niet de juiste module te gebruiken (ergens in de weg een import gemist) en soms gewoon een typfout te veroorzaken zoals:

[formsGroup], met sna form

Antwoord 26

Ten eerste is het niet gerelateerd aan Hoekige versies>2. Importeer gewoon het volgende in uw app.module.ts-bestand om de problemen op te lossen.

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

Voeg vervolgens FormsModule en ReactiveFormsModule toe aan uw importarray.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Opmerking: u kunt ook ReactiveFormsModuleimporteren naar een specifieke module in plaats van naar app.module.ts

Antwoord 27

importeer { FormsModule, ReactiveFormsModule } van ‘@angular/forms’;
en voeg het toe aan de imports-array in het app-module.ts-bestand.

Antwoord 28

Je kunt deze foutmelding ook krijgen als je FormsModuleen ReactiveFormsModuleal hebt geïmporteerd. Ik heb een component (die de [formGroup]-richtlijn gebruikt) van het ene project naar het andere verplaatst, maar ik kon de component niet toevoegen aan de array declarationsin de nieuwe module. Dat resulteerde in het foutbericht Can't bind to 'formGroup' since it isn't a known property of 'form'.

Antwoord 29

Ik heb de laatste 3 dagen met deze fout gehad. Ik voegde het reactiefformsmodule en de formulierenmodule toe zoals vermeld in de bovenstaande opmerkingen in mijn beide modules, maar het had geen effect totdat ik mijn project opnieuw laad met een andere “NG-server”.
Ik weet niet waarom het niet automatisch opnieuw load, maar ik ben tenminste blij dat het eindelijk werkte!
Elke uitleg alstublieft?

ANTWOORD 30

U moet de FormsModule, ReactiveFormsModulein deze module als op het bovenste niveau.

Als u een reactiveFormin een andere module, dan moet u ook deze stap samen met bovenstaande stap doen: importeer ook ReactiveFormsModulein die specifieke module.

Bijvoorbeeld:

imports: [
  BrowserModule,
  FormsModule,
  ReactiveFormsModule,
  AppRoutingModule,
  HttpClientModule,
  BrowserAnimationsModule
],

Kan niet binden aan ‘formGroup’ omdat het geen bekende eigenschap van ‘form’ is