Açısal hata: “Bilinen bir 'input' özelliği olmadığı için 'ngModel' dosyasına bağlanamıyor”

Açısal 4 kullanıyorum ve konsolda bir hata alıyorum:

'İnput' öğesinin bilinen bir özelliği olmadığından 'ngModel' öğesine bağlanamıyor

Bunu nasıl çözebilirim?

Form girişleri için iki yönlü veri bağlama özelliğini kullanabilmek için FormsModulepaketi Açısal modülünüze aktarmanız gerekir .

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

@NgModule({
    imports: [
         FormsModule      
    ]

DÜZENLE

Aynı sorunla ilgili çok sayıda yinelenen soru olduğundan, bu yanıtı geliştiriyorum.

İki olası neden var

• Eksik FormsModule, dolayısıyla bunu Modülünüze ekleyin,

  import { FormsModule } from '@angular/forms';
  
  @NgModule({
      imports: [
          FormsModule      
      ]

• Giriş [(ngModel)]etiketindeki sözdizimini / yazımını denetleyin

Bu doğru bir cevap. FormsMoudle'u içe aktarmanız gerekir

ilk olarak app.module.ts

**

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule  } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    ReactiveFormsModule ,
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

** app.component.spec.ts dosyasında ikinci

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        FormsModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

Saygılarımla ve umut yardımcı olacaktır

Sizin ngModelo aramalarınızdan bir parçası değil çünkü çalışmıyor NgModulehenüz.

Uygulamanız boyunca NgModulekullanma yetkisine sahip olduğunuzu söylemelisiniz, -> -> içine ngModelekleyerek bunu yapabilirsiniz .FormsModuleapp.module.tsimports[]

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

@NgModule({

   imports: [ FormsModule ],       // HERE

   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })

Karma / Jasmine ile Angular 6 Uygulamamı test ederken bu hatayla karşılaştım. FormsModuleÜst düzey modülüme zaten aktarmıştım . Ancak yeni bir bileşen eklediğimde [(ngModel)]testlerim başarısız oldu. Bu durumda, FormsModulebenim ithal etmek gerekiyordu TestBed TestingModule.

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      FormsModule
    ],
    declarations: [
      RegisterComponent
    ]
  })
  .compileComponents();
}));

Soruna yukarıda belirtilen tüm çözümler doğrudur. Ancak tembel yükleme kullanıyorsanız, FormsModuleiçinde formlar bulunan alt modülde içe aktarılması gerekir. İçine eklemek app.module.tsyardımcı olmaz.

Bunu app.module.tsekleyin:

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

@NgModule({
    declarations: [AppComponent],
    imports: [FormsModule],
})

Yukarıda belirtilen her şeyi denedim, ama yine de çalışmıyor.

ama sonunda sorunu Açısal sitede buldum. module.ts formModule almaya çalışın.

Eklemeyi deneyin

Modül düzeyinde model

Kod yukarıdakiyle aynı

Angular 7.xx ile güncelleyin, modüllerimden birinde aynı sorunla karşılaşın .

Bağımsız modülünüzde bulunuyorsa, şu ekstra modülleri ekleyin:

import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [CommonModule, FormsModule], // the order can be random now;
  ...
})

İçinde bulunuyorsa app.module.tsşu modülleri ekleyin:

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports:      [ FormsModule, BrowserModule ], // order can be random now
  ...
})

Davayı kanıtlamak için basit bir demo .

Benim için cevap yanlış yazılıştı ngModel. Ben şöyle yazmıştım: ngModuleolması gerektiği gibi ngModel.

Diğer tüm denemeler, hatayı benim için çözemedi.

import { FormsModule } from '@angular/forms'; // <<<< buraya aktar

BrowserModule, FormsModule // <<<< ve burada

Yani sadece app.module.tsveya başka bir modül dosyasını arar ve içeri aktardığınızdan emin olun FormsModule...

Benim durumumda, eksik ithalat ekledim ReactiveFormsModule.

form modülünü app.module.ts dosyasına aktar.

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


@NgModule({
  declarations: [
    AppComponent,
    ContactsComponent
  ],
  imports: [
    BrowserModule,HttpModule,FormsModule     //Add here form  module
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Html'de:

<input type="text" name="last_name" [(ngModel)]="last_name" [ngModelOptions]="{standalone: true}" class="form-control">

Benim durumumda yanlış yazdım, ben M odel ngmodel istead olarak bahsediyordum :) Umarım yardımcı olur!

Beklenen - [(ngModel)] Gerçek - [(ngmodel)]

İki yönlü ciltleme çalışmazsa, aşağıdakileri doğrulamanız gerekir.

HTML'de ngModel bu şekilde çağrılmalıdır. Girdi öğesinin diğer özniteliğine bağımlılık yoktur

<input [(ngModel)]="inputText">

Emin olun FormsModule modüller dosyasına aktarılır app.modules.ts

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

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent // suppose, this is the component in which you are trying to use two ay binding
    ],
    imports: [
        BrowserModule,
        FormsModule,
        // other modules
],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

İki yönlü ciltleme için ngModel'i kullanmaya çalıştığınız bileşenin, bildirimlerine eklendiğinden emin olun. Bir önceki noktaya eklenen kod # 2

Bu, ngModel kullanarak iki yönlü ciltleme yapmak için yapmanız gereken her şeydir, bu açısal 9'a kadar doğrulanmıştır

Form girişleri için iki yönlü veri bağlama kullanmak istiyorsanız, Açısal modülünüzdeki FormsModule paketini içe aktarmanız gerekir. Daha fazla bilgi için buradaki Açısal 2 resmi eğiticisine ve formlar için resmi belgelere bakın

app.module.ts aşağıdaki satırları ekleyin:

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

önce FormsModule'u içe aktarın ve ardından bileşeninizde ngModel kullanın.

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

HTML Kodu:

<input type='text' [(ngModel)] ="usertext" />

Form modülünü içe aktardıktan sonra bile sorun devam ederse, Girdinizin sayfadaki başka bir girdiye eşit değere sahip bir "ad" özelliği bulunmadığından emin olun .