Tidak dapat mengikat ke 'formGroup' karena itu bukan properti yang dikenal dari 'form'


806

SITUASI:

Tolong bantu! Saya mencoba membuat apa yang seharusnya menjadi bentuk yang sangat sederhana di aplikasi Angular2 saya, tetapi apa pun itu tidak pernah berhasil.

VERSI ANGULAR:

2.0.0 Rc5 sudut

KESALAHAN:

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

masukkan deskripsi gambar di sini

KODE:

Pandangan:

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

Pengontrol:

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

Modul:

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

PERTANYAAN:

Mengapa saya mendapatkan kesalahan itu?

Apakah saya melewatkan sesuatu?

Jawaban:


1412

RC5 FIX

Anda perlu import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'di controller Anda dan menambahkannya ke directivesdalam @Component. Itu akan memperbaiki masalah.

Setelah Anda memperbaikinya, Anda mungkin akan mendapatkan kesalahan lain karena Anda tidak menambahkan formControlName="name"ke formulir input Anda.

RC6 / RC7 / Final release FIX

Untuk memperbaiki kesalahan ini, Anda hanya perlu mengimpor ReactiveFormsModuledari @angular/formsdalam modul Anda. Berikut adalah contoh modul dasar dengan ReactiveFormsModuleimpor:

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

Untuk menjelaskan lebih lanjut, formGroupadalah pemilih untuk direktif bernama FormGroupDirectiveyang merupakan bagian dari ReactiveFormsModule, maka perlu mengimpornya. Ini digunakan untuk mengikat yang sudah ada FormGroupke elemen DOM. Anda dapat membacanya lebih lanjut di halaman dokumen resmi Angular .


13
Yang tidak saya dapatkan adalah mengapa orang perlu menambahkan REACTIVE_FORM_DIRECTIVES jika FormsModule sedang diimpor di dalam app.module. Inti dari modul adalah untuk menghindari keharusan mendeklarasikan arahan di dalam komponen.
Daniel Pliscki

19
@DanielPliscki Anda benar sekali, saya baru tahu mereka memperbaiki masalah ini dalam versi RC6 yang dirilis hari ini. Sekarang Anda tidak perlu melakukan ini, Anda hanya perlu mengimpor FormsModuledan ReactiveFormsModule. Saya akan mengedit jawaban saya.
Stefan Svrkota

12
SAYA HILANGKAN JAM, lupa bahwa saya membuat modul terpisah untuk formulir login saya agar malas memuat dengan modul antar negara. (Saya baru mengenal A2, masih lebih suka A1) Pastikan Anda menggunakan modul yang tepat! Jangan bodoh seperti aku. Anda juga tidak perlu lagi menambahkan ke komponen. Impor dalam modul Anda sudah cukup. Terima kasih
user1889992

4
Terima kasih, berhasil untuk saya. Saya bingung mengapa ini tidak disebutkan dalam panduan untuk FormControls di Angular 2 yang saya
temukan

1
Dalam Angular 4 saya menambahkan ReactiveFormsModuledalam daftar penyedia dan berfungsi. Tidak yakin apakah ini yang seharusnya Anda lakukan.
BrunoLM

151

Sudut 4 dalam kombinasi dengan modul fitur (jika Anda misalnya menggunakan modul bersama) mengharuskan Anda juga mengekspornya ReactiveFormsModuleagar berfungsi.

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

122

Oke setelah beberapa penggalian, saya menemukan solusi untuk "Tidak dapat mengikat ke 'formGroup' karena itu bukan properti yang dikenal dari 'form'."

Untuk kasus saya, saya telah menggunakan beberapa file modul, saya menambahkan ReactiveFormsModule di app.module.ts

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

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

Tapi ini tidak berfungsi ketika saya menggunakan arahan [formGroup] dari komponen yang ditambahkan dalam modul lain, misalnya menggunakan [formGroup] di author.component.ts yang berlangganan 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 {}

Saya pikir jika saya menambahkan ReactiveFormsModule di app.module.ts, secara default ReactiveFormsModule akan diwarisi oleh semua modul anak-anaknya seperti author.module dalam hal ini ... (salah!). Saya perlu mengimpor ReactiveFormsModule di author.module.ts untuk membuat semua arahan bekerja:

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

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

export class AuthorModule {}

Jadi, jika Anda menggunakan submodule, pastikan untuk mengimpor ReactiveFormsModule di setiap file submodule. Semoga ini bisa membantu siapa saja.


1
Bekerja untuk saya, masalah yang sama persis, saya benar-benar berpikir modul dalam array ekspor akan diwarisi oleh modul anak-anak ... Tidak tahu persis mengapa! EDIT: dokumentasi mengatakan ekspor adalah untuk membuat komponen, pipa, arahan tersedia di TEMPLATE KOMPONEN ()
guy777

52

Saya mengalami kesalahan ini selama pengujian unit komponen (hanya selama pengujian, dalam aplikasi itu berfungsi normal). Solusinya adalah mengimpor ReactiveFormsModuledalam .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();
    }));
});

24

Jawaban yang disarankan tidak bekerja untuk saya dengan Angular 4. Sebaliknya saya harus menggunakan cara lain atribut mengikat dengan attrawalan:

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

3
Hei bro! Apakah Anda yakin jawaban Anda terkait dengan pertanyaan itu? :) Pertanyaannya adalah tentang masalah pengaturan formulir - penyebab dengan tidak benar mengatur ngModule
FrancescoMussi

1
@ johnnyfittizio Cukup yakin. Skenario yang sama, pesan kesalahan yang sama.
str

2
Ini bekerja untuk saya, tetapi aneh - mengapa saya membutuhkannya attr.?
CodyBugstein

Terima kasih banyak. Ini juga berfungsi untuk saya, tetapi saya pikir pasti ada sesuatu yang memicu masalah, seperti versi perpustakaan, atau posisi tag <form>? Aneh.
Memetican

Menemukannya - masalahnya adalah saya perlu mengimpor ReactiveFormsModulelangsung ke halaman saya .module.ts. Bukan .page.ts... setelah saya melakukan itu, templat saya dapat mengidentifikasi formGroupatribut dengan benar , tanpa attr.awalan.
Memetican

19

Jika Anda harus mengimpor dua modul kemudian tambahkan seperti ini di bawah ini

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

14

Ingatlah bahwa jika Anda telah mendefinisikan "Modul Fitur", Anda harus mengimpor dalam Modul Fitur, bahkan jika Anda sudah diimpor ke AppModule. Dari dokumentasi Angular:

Modul tidak mewarisi akses ke komponen, arahan, atau pipa yang dideklarasikan dalam modul lain. Apa yang diimpor AppModule tidak relevan dengan ContactModule dan sebaliknya. Sebelum ContactComponent dapat mengikat dengan [(ngModel)], ContactModule-nya harus mengimpor FormsModule.

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


14

Kesalahan mengatakan bahwa FormGroup tidak dikenali dalam modul ini. Jadi, Anda harus mengimpor (bawah) modul ini di setiap modul yang menggunakan FormGroup

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

Kemudian tambahkan FormsModule dan ReactiveFormsModule ke array impor Modul Anda .

imports: [
  FormsModule,
  ReactiveFormsModule
],

Anda mungkin berpikir bahwa saya sudah menambahkannya di AppModule dan harusnya mewarisinya? Tapi ternyata tidak. karena modul ini mengekspor arahan yang diperlukan yang hanya tersedia dalam modul impor. Baca lebih lanjut di sini ... https://angular.io/guide/sharing-ngmodules .

Faktor lain untuk kesalahan ini mungkin kesalahan ejaan seperti di bawah ini ...

[FormGroup] = "form" Modal F, bukan kecil f

[formGroup] = "form" Extra s after form


13

Saya memiliki masalah yang sama dengan Angular 7. Cukup impor mengikuti di file app.module.ts Anda.

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

Kemudian tambahkan FormsModule dan ReactiveFormsModule ke array impor Anda.

imports: [
  FormsModule,
  ReactiveFormsModule
],

1
Ini tidak berfungsi untuk saya dalam Angulat 7.
RaffAl

9

Masalah ini terjadi karena impor yang hilang dari FormsModule, ReactiveFormsModule. Saya juga datang dengan masalah yang sama. Kasus saya berbeda. karena saya bekerja dengan modules. Jadi saya ketinggalan impor di modul orang tua saya meskipun saya telah mengimpornya ke modul anak, itu tidak berfungsi.

Kemudian saya mengimpornya ke modul induk saya seperti di bawah ini, dan itu berhasil!

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

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

7

Untuk orang yang menelusuri utas ini tentang kesalahan ini. Dalam kasus saya, saya memiliki modul bersama di mana saya hanya mengekspor FormsModule dan ReactiveFormsModule dan lupa untuk mengimpornya. Ini menyebabkan kesalahan aneh bahwa formgroup tidak berfungsi di sub komponen. Semoga ini bisa membantu orang menggaruk-garuk kepala.


7

Saya menemukan kesalahan ini ketika mencoba melakukan pengujian e2e dan itu membuat saya gila bahwa tidak ada jawaban untuk ini.

JIKA ANDA MELAKUKAN PENGUJIAN, cari file * .specs.ts Anda dan tambahkan:

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

5

A LITTLE NOTE: Hati-hati dengan loader dan perkecil (Rails env.):

Setelah melihat kesalahan ini dan mencoba setiap solusi di luar sana, saya menyadari ada sesuatu yang salah dengan pemuat html saya.

Saya telah menetapkan lingkungan Rails saya untuk mengimpor jalur HTML agar komponen saya berhasil dengan pemuat ini ( config/loaders/html.js.):

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

Setelah beberapa jam upaya dan tak terhitung impor ReactiveFormsModule saya melihat bahwa saya formGroupadalah surat kecil:formgroup .

Ini membawa saya ke loader dan fakta bahwa HTML saya diperkecil.

Setelah mengubah opsi, semuanya berjalan sebagaimana mestinya, dan saya bisa kembali menangis lagi.

Saya tahu bahwa ini bukan jawaban untuk pertanyaan, tetapi untuk pengunjung Rails di masa mendatang (dan lainnya dengan pemuat khusus) saya pikir ini bisa membantu.


5

menggunakan dan mengimpor 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 { }

5

Jika Anda memiliki masalah ini ketika mengembangkan komponen, maka Anda harus menambahkan dua modul ini ke modul terdekat Anda:

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

Dan jika Anda mengembangkan tes untuk komponen Anda maka Anda harus menambahkan modul ini ke file tes Anda seperti ini:

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


5

Solusi sederhana:

langkah 1: impor ReactiveFormModule

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

langkah 2: tambahkan "ReactiveFormsModule" ke bagian impor

imports: [

    ReactiveFormsModule
  ]

Langkah 3: restart Aplikasi dan Selesai

Contoh:

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

4

Impor dan daftarkan ReactiveFormsModule di app.module.ts Anda.

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

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

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

Pastikan ejaan Anda benar dalam file .ts dan .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>

Saya tidak sengaja menulis [FormGroup] insted dari [formGroup]. Periksa ejaan Anda dengan benar di .html. Itu tidak membuang kesalahan waktu kompilasi Jika ada yang salah dalam file .html.


1
Saya membuat kesalahan yang sama !! Terima kasih banyak. di html saya punya [FormGroup] bukan [formGroup]
tony2tones

Terima kasih untuk umpan baliknya.
DIBYA RANJAN TRIPATHY

4

Catatan : jika Anda bekerja di dalam komponen modul anak, maka Anda hanya perlu mengimpor ReactiveFormsModule dalam modul anak daripada modul induk aplikasi root


4

Jangan bodoh seperti aku. Sedang mendapatkan kesalahan yang sama seperti di atas, NONE dari opsi di utas ini bekerja. Kemudian saya menyadari saya menggunakan huruf 'F' di FormGroup. Doh!

Dari pada:

[FormGroup]="form"

Melakukan:

[formGroup]="form"


1
masalah yang sama di sini
greg

3

jika ini hanya kesalahan naskah tetapi semua yang ada di formulir Anda berfungsi, Anda mungkin harus memulai ulang IDE Anda


3

Saya mempunyai masalah yang sama, pastikan bahwa jika menggunakan submodules (misalnya, Anda tidak hanya memiliki app.component.module.ts, tetapi Anda memiliki komponen terpisah seperti login.module.ts, yang Anda masukkan impor ReactiveFormsModule dalam login ini .module.ts impor, agar bisa berfungsi. Saya bahkan tidak perlu mengimpor ReactiveFormsModule di app.component.module saya karena saya menggunakan submodul untuk semuanya.

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

3

Mungkin bisa membantu seseorang:

ketika Anda memiliki formGroup di modal (entrycomponent), maka Anda harus mengimpor ReactiveFormsModule juga di modul tempat modal tersebut dipakai.


2

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

berarti Anda mencoba mengikat properti menggunakan angular ( [prop]) tetapi angular tidak dapat menemukan apa pun yang ia ketahui untuk elemen tersebut (dalam hal iniform ).

ini bisa terjadi dengan tidak menggunakan modul yang tepat (melewatkan impor di suatu tempat di jalan) dan kadang-kadang hanya menyebabkan kesalahan ketik seperti:

[formsGroup], dengan ssetelahform


0

Solusi saya halus dan saya belum melihatnya terdaftar.

Saya menggunakan formulir reaktif dalam komponen Dialog Bahan Angular yang tidak dideklarasikan di app.module.ts. Komponen utama dideklarasikan app.module.tsdan akan membuka komponen dialog tetapi komponen dialog tidak secara eksplisit dinyatakan dalam app.module.ts.

Saya tidak memiliki masalah dalam menggunakan komponen dialog secara normal kecuali bahwa bentuknya melemparkan kesalahan ini setiap kali saya membuka dialog.

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


0

Pertama, ini tidak terkait dengan versi Angular> 2 . Cukup impor berikut dalam file app.module.ts Anda akan memperbaiki masalah.

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

Kemudian tambahkan FormsModule dan ReactiveFormsModule ke array impor Anda.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Catatan : Anda juga dapat mengimpor ReactiveFormsModuleke modul tertentuapp.module.ts


-2

Setelah saya menambahkan modul saya ke AppModulesemuanya mulai berfungsi dengan baik.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.