'Form'un bilinen bir özelliği olmadığı için' formGroup 'a bağlanamıyor

DURUM:

Lütfen yardım et! Angular2 uygulamamda çok basit bir form olması gerekeni yapmaya çalışıyorum ama ne işe yaramıyor olursa olsun.

AÇILI VERSİYON:

Açısal 2.0.0 Rc5

HATA:

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

KOD:

Görünüm:

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

Kontrol eden, denetleyici:

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

SORU:

Neden bu hatayı alıyorum?

Bir şey mi kaçırıyorum?

RC5 DÜZELTME

Sen gerek import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'controller içerisinde ve eklemek directivesiçinde @Component. Bu sorunu çözecektir.

Bunu düzelttikten sonra formControlName="name", formunuza girdinizi eklemediğiniz için muhtemelen başka bir hata alırsınız .

RC6 / RC7 / Son sürüm FIX

Bu hatayı düzeltmek için, sadece ithalat gerek ReactiveFormsModuledan @angular/formssizin modülünde. Aşağıda, ReactiveFormsModuleiçe aktarma içeren temel bir modül örneği verilmiştir :

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

Daha fazla açıklamak gerekirse , bir parçası olan formGroupdirektif için bir seçici , dolayısıyla onu içe aktarma ihtiyacı. Mevcut bir DOM öğesine bağlamak için kullanılır . Bununla ilgili daha fazla bilgiyi Angular'ın resmi dokümanlar sayfasında bulabilirsiniz .FormGroupDirectiveReactiveFormsModuleFormGroup

Açısal 4, özellik modülleriyle birlikte (örneğin bir paylaşılan modül kullanıyorsanız), ReactiveFormsModuleçalışmak için dışa aktarmanızı gerektirir .

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

Tamam bazı kazma sonra "formGroup" için bağlanamıyorum çünkü 'form' bilinen bir özelliği olmadığı için bir çözüm buldum.

Benim durumum için, birden fazla modül dosyası kullanıyorum, app.module.ts dosyasına ReactiveFormsModule ekledim

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

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

Ancak başka bir modüle eklenen bir bileşenden [formGroup] yönergesini kullandığımda, örneğin author.module.ts dosyasında abone olan author.component.ts dosyasında [formGroup] kullanarak bu çalışma değildi:

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
import { AuthorComponent } from './author.component';

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    AuthorComponent,
  ],
  providers: [...]
})

export class AuthorModule {}

Ben app.module.ts içinde ReactiveFormsModule ekledi, varsayılan olarak ReactiveFormsModule bu durumda author.module gibi tüm çocuk modülleri tarafından miras olacağını düşündüm ... (yanlış!). Tüm direktiflerin çalışması için ReactiveFormsModule'u author.module.ts dosyasına aktarmam gerekiyordu:

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

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

export class AuthorModule {}

Bu nedenle, alt modül kullanıyorsanız, her alt modül dosyasında ReactiveFormsModule dosyasını aldığınızdan emin olun. Umarım bu herkese yardımcı olur.

Bir bileşenin birim sınaması sırasında bu hatayla karşılaştım (yalnızca sınama sırasında, normal olarak çalışan uygulama içinde). Çözelti ithalat etmektir ReactiveFormsModuleiçinde .spec.tsdosyanın:

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

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

Önerilen cevap Köşeli 4 ile benim için işe yaramadı. Bunun yerine , önek ile başka bir nitelik bağlama yöntemi kullanmak zorunda kaldım attr:

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

İki modülü içe aktarmanız gerekiyorsa, aşağıdaki gibi ekleyin

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

"Özellik Modülleri" tanımladıysanız, daha önce içeri aktarmış olsanız bile Özellik Modülüne aktarmanız gerektiğini unutmayın AppModule. Açısal belgelerden:

Modüller, diğer modüllerde bildirilen bileşenlere, yönergelere veya borulara erişimi devralmaz. AppModule'un içe aktardığı şey, ContactModule ile alakasız veya tam tersi. ContactComponent'in [(ngModel)] ile bağlanabilmesi için, ContactModule öğesinin FormsModule dosyasını içe aktarması gerekir.

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

Hata, FormGroup'un bu modülde tanınmadığını söylüyor. Bu nedenle, bu (aşağıda) modülleri FormGroup kullanan her modülde içe aktarmanız gerekir

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

Ardından Modülünüzün import dizisine FormsModule ve ReactiveFormsModule ekleyin .

imports: [
  FormsModule,
  ReactiveFormsModule
],

AppModule'a zaten eklediğimi düşünüyor olabilirsiniz ve onu miras almalı? Ama öyle değil. çünkü bu modüller sadece içe aktarma modüllerinde bulunan gerekli direktifleri dışa aktarmaktadır. Buradan daha fazlasını okuyun ... https://angular.io/guide/sharing-ngmodules .

Bu hataların diğer faktörleri aşağıdaki gibi büyü hatası olabilir ...

[FormGroup] = "form" Sermaye F yerine küçük f

[formsGroup] = "form" Ekstra s formunda sonra

Açısal 7 ile aynı sorunu yaşadım. Sadece app.module.ts dosyanızda içe aktarın.

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

Sonra ithalat dizinize FormsModule ve ReactiveFormsModule ekleyin.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Bu sorun, FormsModule, ReactiveFormsModule.I eksik eksik nedeniyle oluşur. Ben de aynı sorunla birlikte geldi. Benim durumum farklıydı. Bu yüzden alt modüllere aktarmış olsam da üst modüllerimdeki ithalatları kaçırdım, çalışmadı.

Sonra aşağıdaki gibi ana modüller içine ithal ve işe yaradı!

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

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

Bu konu hakkında bu konuları dolaşan insanlar için. Benim durumumda, sadece FormsModule ve ReactiveFormsModule'u ihraç ettiğim ve içe aktarmayı unuttuğum paylaşılan bir modülüm vardı. Bu, form gruplarının alt bileşenlerde çalışmadığı garip bir hataya neden oldu. Umarım bu insanlar kafalarını kaşıyor.

E2e testi yapmaya çalışırken bu hatayla karşılaşıyordum ve buna cevap vermem beni deli ediyordu.

TEST YAPIYORSANIZ * .specs.ts dosyanızı bulun ve ekleyin:

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

BİRAZ NOT: Yükleyicilere dikkat edin ve en aza indirin (Rails env.):

Bu hatayı gördükten ve orada her çözümü denedikten sonra, html yükleyicimle ilgili bir sorun olduğunu anladım.

Rails ortamımı, bu yükleyici ( config/loaders/html.js.) ile bileşenlerim için HTML yollarını başarıyla içe aktaracak şekilde ayarladım :

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

Birkaç saat çabaları ve ReactiveFormsModule ithalatının sayısız sonra ben benim gördük formGroupküçük harfler vardı: formgroup.

Bu beni yükleyiciye yönlendirdi ve HTML'mi en aza indirdi.

Seçenekleri değiştirdikten sonra, her şey olması gerektiği gibi çalıştı ve tekrar ağlamaya geri dönebilirim.

Bu sorunun bir cevabı olmadığını biliyorum, ama gelecekteki Rails ziyaretçileri (ve özel yükleyiciler ile diğer) için bu yararlı olabilir düşünüyorum.

REACTIVE_FORM_DIRECTIVES kullanarak ve içe aktarın :

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

Bir bileşen geliştirirken bu sorunla karşılaşırsanız, bu iki modülü en yakın modülünüze eklemelisiniz:

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

Bileşenleriniz için bir test geliştiriyorsanız, bu modülü test dosyanıza şu şekilde eklemelisiniz:

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

Karşılık gelen modülde ReactiveFormsModule'u içe aktarın

Basit çözüm:

1. adım: ReactiveFormModule dosyasını içe aktarın

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

2. adım: içe aktarma bölümüne "ReactiveFormsModule" ekleyin

imports: [

    ReactiveFormsModule
  ]

3.Adım: Uygulamayı yeniden başlatın ve Tamamlandı

Misal :

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

ReactiveFormsModule uygulamasını app.module.ts dosyasına aktarın ve kaydedin.

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

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

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

Yazımınızın hem .ts hem de .html dosyasında doğru olduğundan emin olun. xxx.ts

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

xxx.html dosyası-

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

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

Yanlışlıkla [formGroup] 'a ait [FormGroup] yazdım. Yazımınızı .html dosyasında doğru şekilde kontrol edin. Derleme zamanı hatası atmaz. .Html dosyasında yanlış bir şey varsa.

Not : alt modülün bileşeni içinde çalışıyorsanız, u üst uygulama kök modülü yerine alt modülde ReactiveFormsModule'u içe aktarmanız yeterlidir

Benim gibi aptal olma. Yukarıdaki ile aynı hatayı alıyordu, bu konudaki seçeneklerin HİÇBİRİ işe yaramadı. Sonra FormGroup 'F' büyük harf yaptım fark ettim. Doh!

Onun yerine:

[FormGroup]="form"

Yapmak:

[formGroup]="form"

bu yalnızca bir daktilo hatasıysa ancak formunuzdaki her şey işe yararsa, IDE'nizi yeniden başlatmanız gerekebilir

Eminim kullanarak eğer yapmak aynı problem vardı submodules , (örneğin, sadece app.component.module.ts var ama bunun içinde ReactiveFormsModule ithalat içerdiğini, login.module.ts gibi ayrı bir bileşen böyle olması login .module.ts bunun için işe, ithal. Ben her şey için submodules kullanıyorum çünkü ben bile benim app.component.module ithalat ReactiveFormsModule gerekmez.

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

Birine yardım edebilir:

bir modda (giriş bileşeni) bir formGroup varsa, modun örneklendiği modülde de ReactiveFormsModule'u içe aktarmanız gerekir.

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

açısal ( [prop]) kullanarak bir özelliği bağlamaya çalışmanız anlamına gelir, ancak açısal o öğe için bildiği hiçbir şeyi bulamaz (bu durumda form).

bu, doğru modülü kullanmamanız (bir yerde bir içe aktarmanın eksik olması) ve bazen sadece bir yazım hatası olmasına neden olabilir:

[formsGroup]ile ssonraform

Benim çözümüm ince ve zaten listelenmiş görmedim.

Belirtilmeyen bir Açısal Malzemeler İletişim Kutusu bileşeninde reaktif formlar kullanıyordum app.module.ts. Ana bileşen bildirildi app.module.tsve iletişim kutusu bileşenini açacaktı, ancak iletişim bileşeni açıkça bildirilmedi app.module.ts.

İletişim kutusunu her açtığımda formun bu hatayı atması dışında normalde iletişim bileşenini kullanırken herhangi bir sorun yaşamadım.

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

İlk olarak, açısal versiyonlar> 2 ile ilgili değildir . Sadece app.module.ts dosyanızdaki aşağıdaki sorunları giderin.

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

Sonra ithalat dizinize FormsModule ve ReactiveFormsModule ekleyin.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Not : Bunun ReactiveFormsModuleyerine belirli bir modüle de aktarabilirsinizapp.module.ts

Bir kere modülümü eklediğimde AppModuleher şey iyi çalışmaya başladı.