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

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'

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?

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 .

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

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.

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

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

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

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

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

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

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

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.

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

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.

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

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

Impor ReactiveFormsModule dalam modul yang sesuai

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

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.

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

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"

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

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

Mungkin bisa membantu seseorang:

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

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

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

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

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