Nie można powiązać z „formGroup”, ponieważ nie jest to znana właściwość „form”

SYTUACJA:

Proszę pomóż! Staram się stworzyć w mojej aplikacji Angular2 coś, co powinno być bardzo prostą formą, ale nie ważne, co nigdy nie działa.

WERSJA KĄTOWA:

Kątowy 2.0.0 Rc5

BŁĄD:

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

KOD:

Widok:

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

Kontroler:

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

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

PYTANIE:

Dlaczego dostaję ten błąd?

Czy coś brakuje?

RC5 FIX

Trzeba import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'w kontrolerze i dodać go directivesw @Component. To rozwiąże problem.

Po naprawieniu tego prawdopodobnie pojawi się kolejny błąd, ponieważ nie dodałeś formControlName="name"danych wejściowych w formularzu.

RC6 / RC7 / Final release FIX

Aby naprawić ten błąd, wystarczy zaimportować ReactiveFormsModulez @angular/formsmodułu. Oto przykład podstawowego modułu z ReactiveFormsModuleimportem:

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

Aby wyjaśnić dalej, formGroupjest selektorem nazwanej dyrektywy, FormGroupDirectivektóra jest częścią ReactiveFormsModule, stąd potrzeba jej zaimportowania. Służy do wiązania istniejącego FormGroupelementu DOM. Możesz przeczytać więcej na ten temat na oficjalnej stronie dokumentacji Angulara .

Angular 4 w połączeniu z modułami funkcji (jeśli na przykład używasz modułu współdzielonego) wymaga również wyeksportowania go ReactiveFormsModuledo pracy.

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, po kilku kopaniach znalazłem rozwiązanie dla „Nie można powiązać z„ formGroup ”, ponieważ nie jest to znana właściwość„ form ”.

W moim przypadku korzystałem z wielu plików modułów, dodałem ReactiveFormsModule w app.module.ts

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

@NgModule({
  declarations: [
    AppComponent,
  ]
  imports: [
    FormsModule,
    ReactiveFormsModule,
    AuthorModule,
],
...

Ale to nie działało, gdy używam dyrektywy [formGroup] z komponentu dodanego w innym module, np. Używając [formGroup] w autor.component.ts, który jest subskrybowany w pliku autor.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 {}

Pomyślałem, że jeśli dodam ReactiveFormsModule w app.module.ts, domyślnie ReactiveFormsModule zostanie odziedziczony przez wszystkie jego moduły potomne, takie jak autor.module w tym przypadku ... (źle!). Musiałem zaimportować ReactiveFormsModule do autor.module.ts, aby wszystkie dyrektywy działały:

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

@NgModule({
  imports: [
    ...,
    FormsModule,    //added here too
    ReactiveFormsModule //added here too
  ],
  declarations: [...],
  providers: [...]
})

export class AuthorModule {}

Tak więc, jeśli używasz submodułów, pamiętaj, aby zaimportować ReactiveFormsModule w każdym pliku submodułu. Mam nadzieję, że to pomoże każdemu.

Wystąpił ten błąd podczas testowania jednostkowego komponentu (tylko podczas testowania, w aplikacji działał normalnie). Rozwiązaniem jest zaimportowanie ReactiveFormsModuledo .spec.tspliku:

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

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

Sugerowana odpowiedź nie działała dla mnie w Angular 4. Zamiast tego musiałem użyć innego sposobu wiązania atrybutów z attrprzedrostkiem:

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

Jeśli musisz zaimportować dwa moduły, dodaj tak poniżej

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

Pamiętaj, że jeśli zdefiniowałeś „moduły funkcji”, musisz zaimportować do modułu funkcji, nawet jeśli już je zaimportowałeś AppModule. Z dokumentacji kątowej:

Moduły nie dziedziczą dostępu do komponentów, dyrektyw lub potoków zadeklarowanych w innych modułach. To, co importuje AppModule, nie ma znaczenia dla ContactModule i odwrotnie. Aby ContactComponent mógł się połączyć z [(ngModel)], jego moduł ContactModule musi zaimportować moduł FormsModule.

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

Błąd mówi, że FormGroup nie jest rozpoznawany w tym module. Musisz więc zaimportować te (poniżej) moduły do każdego modułu korzystającego z FormGroup

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

Następnie dodaj FormsModule i ReactiveFormsModule do tablicy importu modułu .

imports: [
  FormsModule,
  ReactiveFormsModule
],

Być może myślisz, że już go dodałem w AppModule i powinien on po nim dziedziczyć? Ale to nie jest. ponieważ te moduły eksportują wymagane dyrektywy, które są dostępne tylko podczas importowania modułów. Przeczytaj więcej tutaj ... https://angular.io/guide/sharing-ngmodules .

Innymi czynnikami tych błędów mogą być błędy ortograficzne, jak poniżej ...

[FormGroup] = "form" Capital F zamiast małego f

[formGroup] = "form" Dodatkowe s po formularzu

Miałem ten sam problem z Angularem 7. Wystarczy zaimportować następujące w pliku app.module.ts.

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

Następnie dodaj FormsModule i ReactiveFormsModule do tablicy importu.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Ten problem występuje z powodu braku importu FormsModule, ReactiveFormsModule. Ja również przyszedł z tym samym problemem. Moja sprawa była inna. ponieważ pracowałem z modułami, więc nie zauważyłem importu w modułach nadrzędnych, chociaż zaimportowałem go do modułów podrzędnych, nie działało.

Następnie zaimportowałem go do moich modułów nadrzędnych jak poniżej i zadziałało!

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

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

Dla osób przechadzających się tymi wątkami o tym błędzie. W moim przypadku miałem wspólny moduł, w którym eksportowałem tylko FormsModule i ReactiveFormsModule i zapomniałem go zaimportować. Spowodowało to dziwny błąd polegający na tym, że grupy form nie działały w podkomponentach. Mam nadzieję, że to pomaga ludziom drapać się po głowach.

Napotkałem ten błąd podczas próby przeprowadzenia testów e2e i doprowadzało mnie to do szału, że nie ma na to odpowiedzi.

JEŚLI ROBISZ TESTOWANIE, znajdź plik * .specs.ts i dodaj:

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

MAŁA UWAGA: Uważaj na ładowarki i minimalizuj (środowisko szyn):

Po zobaczeniu tego błędu i wypróbowaniu każdego rozwiązania, zdałem sobie sprawę, że coś jest nie tak z moim programem ładującym HTML.

Skonfigurowałem środowisko Railsów, aby pomyślnie importowało ścieżki HTML dla moich komponentów za pomocą tego modułu ładującego ( config/loaders/html.js.):

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

Po kilku godzinach starań i niezliczone importu ReactiveFormsModule zobaczyłem, że mój formGroupbyły małe litery: formgroup.

Doprowadziło mnie to do modułu ładującego i faktu, że zmniejszył mój HTML do minimalizacji.

Po zmianie opcji wszystko działało tak, jak powinno, i mogłem wrócić do płaczu.

Wiem, że to nie jest odpowiedź na pytanie, ale myślę, że dla przyszłych użytkowników Railsów (i innych z niestandardowymi programami ładującymi) może to być pomocne.

przy użyciu i importowaniu 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 { }

Jeśli masz ten problem podczas tworzenia komponentu, powinieneś dodać te dwa moduły do ​​najbliższego modułu:

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

A jeśli opracowujesz test dla swoich komponentów, powinieneś dodać ten moduł do pliku testowego w następujący sposób:

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

Zaimportuj ReactiveFormsModule do odpowiedniego modułu

Proste rozwiązanie:

krok 1: zaimportuj ReactiveFormModule

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

krok 2: dodaj „ReactiveFormsModule” do sekcji importowania

imports: [

    ReactiveFormsModule
  ]

Krok 3: uruchom ponownie aplikację i gotowe

Przykład:

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

Zaimportuj i zarejestruj ReactiveFormsModule w pliku app.module.ts.

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

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

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

Upewnij się, że pisownia jest poprawna zarówno w pliku .ts, jak i .html. xxx.ts

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

plik xxx.html

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

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

Przez pomyłkę napisałem [FormGroup] zamiast [formGroup]. Sprawdź poprawność pisowni w .html. Nie generuje błędu czasu kompilacji Jeśli coś jest nie tak w pliku .html.

Uwaga : jeśli pracujesz w komponencie modułu podrzędnego, wystarczy zaimportować ReactiveFormsModule do modułu podrzędnego zamiast nadrzędnego modułu głównego aplikacji

Nie bądź głupi jak ja. Wystąpił taki sam błąd jak powyżej, ŻADNA z opcji w tym wątku nie działała. Potem zdałem sobie sprawę, że napisałem wielką literą „F” w FormGroup. Doh!

Zamiast:

[FormGroup]="form"

Zrobić:

[formGroup]="form"

jeśli jest to tylko błąd maszynopisu, ale wszystko w twoim formularzu działa, być może będziesz musiał ponownie uruchomić IDE

Miałem ten sam problem, upewnij się, że jeśli używasz submodułów (na przykład, nie tylko masz app.component.module.ts, ale masz osobny składnik, taki jak login.module.ts, że do tego logowania dołączasz import ReactiveFormsModule .module.ts import, aby działał. Nie muszę nawet importować ReactiveFormsModule w moim app.component.module, ponieważ do wszystkiego używam submodułów.

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

Może komuś pomóc:

gdy masz formGroup w modalu (entrycomponent), musisz zaimportować ReactiveFormsModule również w module, w którym jest on tworzony.

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

oznacza, że ​​próbujesz powiązać właściwość za pomocą angular ( [prop]), ale kątowy nie może znaleźć niczego, co wie dla tego elementu (w tym przypadkuform ).

może się to zdarzyć, jeśli nie użyjesz odpowiedniego modułu (brakuje gdzieś sposobu importu), a czasami po prostu powoduje literówkę:

[formsGroup], z spóźniejform

Moje rozwiązanie było subtelne i nie widziałem go jeszcze na liście.

Korzystałem z form reaktywnych w komponencie okna dialogowego materiałów kątowych, który nie został zadeklarowany app.module.ts. Główny komponent został zadeklarowany w app.module.tsi otworzyłby komponent okna dialogowego, ale komponent okna dialogowego nie został jawnie zadeklarowany w app.module.ts.

Nie miałem żadnych problemów z normalnym użyciem komponentu okna dialogowego, z wyjątkiem tego, że formularz generował ten błąd przy każdym otwarciu okna dialogowego.

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

Po dodaniu modułu do AppModulewszystkiego wszystko zaczęło działać poprawnie.