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

Bileşen gösterilmese bile Açısal uygulamamı başlatırken aşağıdaki hatayla karşılaştım.

<input>Benim app çalışır böylece yorum yapmak zorunda .

zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
   <div>
      <label>Created:</label>
      <input  type="text" [ERROR ->][(ngModel)]="test" placeholder="foo" />
   </div>
</div>"): InterventionDetails@4:28 ; Zone: <root> ; Task: Promise.then ; Value: 

Hero plunker'a bakıyorum, ancak kodumdan herhangi bir fark görmüyorum.

Bileşen dosyası:

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Intervention } from '../../model/intervention';

@Component({
   selector: 'intervention-details',
   templateUrl: 'app/intervention/details/intervention.details.html',
   styleUrls: ['app/intervention/details/intervention.details.css']
})

export class InterventionDetails
{
   @Input() intervention: Intervention;

   public test : string = "toto";
}

Evet, app.module.ts dosyasında yeni ekledim:

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

[...]

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

Form girişleri için iki yönlü veri bağlama özelliğini kullanabilmek için FormsModulepaketi Angularmodülünüze aktarmanız gerekir . Daha fazla bilgi için bkz Angular 2resmi öğretici burada ve resmi belgeler formlar

Açısal 2 , 4 ve 5+[(ngModel)] içinde kullanmak için FormsModule'u Açısal formdan içe aktarmanız gerekir ...

Ayrıca formlardaki altında bu yolda olduğunu Açısal repo içinde github :

açısal / paketleri / formları / src / yönergeleri / ng_model.ts

Muhtemelen bunun için çok zevk değil angularjs geliştiriciler kullanabilirdin olarak ng-modeli zaman önce her yerde, ancak dilediğiniz kullanımına ayrı modüller Eğik denemeden gibi anda kullanmak istediğiniz, ngModel içindedir FormsModule şimdi .

Ayrıca ReactiveFormsModule kullanıyorsanız , onu da içe aktarmanız gerekir.

Yani sadece app.module.ts arar ve FormsModuleithal ettiğinizden emin olun ...

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';  //<<<< import it here
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, FormsModule //<<<< and here
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Ayrıca bu FormsModule ngModeliçinde Angular4 için başlangıç ​​yorumları :

/**
 * `ngModel` forces an additional change detection run when its inputs change:
 * E.g.:
 * ```
 * <div>{{myModel.valid}}</div>
 * <input [(ngModel)]="myValue" #myModel="ngModel">
 * ```
 * I.e. `ngModel` can export itself on the element and then be used in the template.
 * Normally, this would result in expressions before the `input` that use the exported directive
 * to have and old value as they have been
 * dirty checked before. As this is a very common case for `ngModel`, we added this second change
 * detection run.
 *
 * Notes:
 * - this is just one extra run no matter how many `ngModel` have been changed.
 * - this is a general problem when using `exportAs` for directives!
 */

Sen bir formda, girişinizi kullanmak isterseniz, sizinle kullanabilirsiniz ngModelOptionsve bağımsız hale gerçek ...

[ngModelOptions]="{standalone: true}"

Daha fazla bilgi için bak ng_model Açısal bölümünde burada

FormsModule'u içe aktarmanız gerekir

App.module.ts dosyasını açın

ve satır ekle

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

ve

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

Buna atmak birine yardım edebilir.

Yeni bir NgModule yarattık varsayarsak, demek AuthModulesenin Auth ihtiyaçlarını ele adanmış, ithalat emin olun FormsModuleo AuthModule içinde çok .

Eğer kullanacaksanız bu FormsModuleSADECE içindeAuthModuleFormModule varsayılan olarak içe aktarmanız gerekmez.AppModule

Yani şöyle bir şey AuthModule:

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

import { authRouting } from './auth.routing';
import { LoginComponent, SignupComponent } from './auth.component';

@NgModule({
  imports:      [ 
    authRouting,
    FormsModule
   ],
  declarations: [ 
    SignupComponent,
    LoginComponent
  ]
})
export class AuthModule { }

Sonra başka bir yerde AppModulekullanmıyorsanız içe aktarmayı unutun FormsModule.

Basit Ruh: App.module.ts içinde

örnek 1

import {FormsModule} from "@angular/forms";  
// add in imports 

imports: [
 BrowserModule,
 FormsModule
 ],

ÖRNEK 2

[(NgModel)] kullanmak istiyorsanız, app.module.ts dosyasına FormsModule'u aktarmanız gerekir

import { FormsModule  } from "@angular/forms";     
@NgModule({
  declarations: [
    AppComponent, videoComponent, tagDirective, 
  ],
  imports: [
    BrowserModule,  FormsModule

  ],
  providers: [ApiServices],
  bootstrap: [AppComponent]
})
export class AppModule { }

[(NgModel)] kullanmak istediğiniz modüllerde FormsModule'ü içe aktarın

Bu hatadan kurtulmak için izlemeniz gereken iki adım vardır

1. FormsModule'u uygulama modülünüze aktarın
2. @NgModule dekoratöründe içe aktarma değeri olarak iletin

temelde app.module.ts aşağıdaki gibi görünmelidir:

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

Umarım yardımcı olur

Sen ithalat gerek FormsModule senin içinde kök bu bileşen kök yani ise modül app.module.ts

Lütfen app.module.ts dosyasını açın

Alma FormsModule gelen açısal / formları @

Ör:

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

ve

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

Açısal 7 kullanıyorum

Reaktif form oluşturmak için FormBuilder sınıfını kullanıyorum çünkü ReactiveFormsModule almak zorunda.

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

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

Uygulama modülünüzde FormsModule'u içe aktarın .

uygulamanızın iyi çalışmasını sağlar.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {ContactListCopmponent} from './contacts/contact-list.component';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,ContactListCopmponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Kullanmak gerekiyorsa [(ngModel)]öncelikle içe gerekiyor FormsModuleyılında app.module.tsve daha sonra ithalatın liste halinde ekleyin. Bunun gibi bir şey:

app.module.ts

1. ithalat import {FormsModule} from "@angular/forms";
2. ithalatta ekle imports: [ BrowserModule, FormsModule ],

app.component.ts

1. Misal: <input type="text" [(ngModel)]="name" >
2. ve sonra <h1>your name is: {{name}} </h1>

ngModel, FormsModule'un bir parçasıdır. NgModel ile çalışmak için @ açısal / formlardan içe aktarılmalıdır.

Lütfen app.module.ts dosyasını aşağıdaki gibi değiştirin:

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

[...]

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

Birisi kabul edilen çözümü uyguladıktan sonra hala hata alıyorsa, bunun nedeni büyük olasılıkla giriş etiketinde ngModel özelliğini kullanmak istediğiniz bileşen için ayrı bir modül dosyanız olması olabilir. Bu durumda, kabul edilen çözümü bileşenin module.ts dosyasına da uygulayın.

Açısal 5 kullanıyorum.

Benim durumumda, RactiveFormsModule'u da içe aktarmam gerekiyordu.

app.module.ts (veya anymodule.module.ts)

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],

Bu sorunun Açısal 2 ile ilgili olduğunu biliyorum, ancak Açısal 4'teyim ve bu cevapların hiçbiri yardımcı olmadı.

Açısal 4'te sözdiziminin

[(ngModel)]

Bu yardımcı olur umarım.

FormsModule'u doğru bir şekilde içe aktardıktan sonra hala hata alıyorsanız, projeniz derlenmediği için (herhangi bir şey olabilecek başka bir hata nedeniyle) ve çözümünüz tarayıcınıza yansıtılmadığı için terminalinizi veya (Windows konsolunuzu) kontrol edin!

Benim durumumda, konsolumda şu ilgisiz hata vardı: 'ApiService' türünde 'retrieveGithubUser' özelliği mevcut değil.

Modülde ngModel'i kullanmak istediğinizde FormsModule'u içe aktarmanız gerekir

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

ngModel FormsModule'dan geliyor.Bu tür bir hata alabileceğiniz bazı durumlar vardır:

1. FormsModule'u, bileşeninizin bildirildiği modülün, ngModel'in kullanıldığı bileşene içe aktarma modülüne aktarmadınız.
2. FormsModule'u başka bir modülün devralınan bir modülüne içe aktardınız. Bu durumda iki seçeneğiniz vardır:
   • FormsModule'un her iki modülden içe aktarma dizisine içe aktarılmasına izin verin: module1 ve module2. Kural olarak: Bir modülün içe aktarılması, içe aktarılan modüllerine erişim SAĞLAMAZ (İçe aktarma devralınmaz)

• FormsModule'ü modül1'deki içe aktarma ve dışa aktarma dizilerine model2'de de görebilecek şekilde bildirme

3. (Bazı sürümlerde bu sorunla karşılaştım) FormsModule'ü doğru bir şekilde içe aktardınız, ancak sorun giriş HTML etiketinde. Girdi için ad etiketi özniteliğini eklemelisiniz ve [(ngModel)] içindeki nesne ilişkili ad, ad özniteliğine adla aynı olmalıdır

   

Gelen ngModuleİçe gerek FormsModuleçünkü ngModelgeliyor FormsModule. Lütfen paylaştığım aşağıdaki kod gibi app.module.ts dosyasını değiştirin

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    declarations: [
         AppComponent,
         HomeComponent
    ],
    imports: [
         BrowserModule,
         AppRoutingModule,
         FormsModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

FormModule'u bir uygulama.modülünü içe aktar

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule     
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Bazen farklı bir modülde paylaşılmayan bir modülden bir bileşen kullanmaya çalıştığınızda bu hatayı alırsınız.

Örneğin, module1.componentA.component.ts ve module2.componentC.component.ts içeren 2 modülünüz vardır ve module1.componentA.component.ts öğesinden seçiciyi module2 (örn. <module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2">) İçindeki bir şablonda kullanmaya çalışırsınız. some1.putVariableInModule1 öğesinin module1.componentA.component.ts içinde kullanılamaması - module1.componentA öğesinde bulunmanıza rağmen @Input() someInputVariableInModule1.

Bu durumda, diğer modüllerde erişilebilir olması için module1.componentA öğesini paylaşmak istersiniz. Bu nedenle, module1.componentA öğesini bir sharedModule içinde paylaşırsanız, module1.componentA diğer modüllerin içinde (modül1 dışında) kullanılabilir ve sharedModule'u içe aktaran her modül, @Input()bildirilen değişkeni enjekte eden şablonlarındaki seçiciye erişebilir .

Senaryom için modülüme hem [CommonModule] hem de [FormsModule] aktarmalıydım

import { NgModule } from '@angular/core' 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 

import { MyComponent } from './mycomponent'

@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
    declarations: [
        MyComponent 
    ]
 }) 
export class MyModule { }

FormsModule'u içe aktarmanız gerekir

App.module.ts dosyasını açın

ve satır ekle

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

ve

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

Biz zaten ithal Bazen BrowserModule, FormsModuleben de aynı hata var gerçi diğer ilgili Modüller sonra anladım ki biz Sipariş bunları ithal gerek , benim durumumda ben kaçırdım. Sipariş gibi olmalı Yani BrowserModule, FormsModule, ReactiveFormsModule.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule     
  ],
  providers: [],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Umarım bu birine yardımcı olur .. :)

Bu, Komut Dosyası yerine düz JavaScript kullanan kişiler içindir. Aşağıdaki gibi sayfanın üstündeki formlar komut dosyasına başvurmaya ek olarak

<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>

ayrıca modül yükleyiciye modülü yüklemesini söylemelisiniz ng.forms.FormsModule. Değişiklikleri yaptıktan sonra yöntem importsözelliğim NgModuleaşağıdaki gibi görünüyordu

imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],

Mutlu kodlama!

RC1'den RC5'e geçtim ve bu hatayı aldım.

Geçişimi tamamladım (yeni bir app.module.tsdosya ekledim , package.jsonyeni sürümleri ve eksik modülleri içerecek şekilde değiştirdim ve son main.tsolarak Angular2 hızlı başlangıç ​​örneğine göre önyüklememi değiştirdim ).

Yaptım npm updatesonranpm outdatedYüklü sürümlerin doğru olduğunu onaylamak için , hala şans yok.

Tamamen node_modulesklasörü silerek ve yeniden yükleme npm install- Voila! Sorun çözüldü.

Öğreticiyi ilk yaptığımda, main.ts şimdi olduğundan biraz farklı görünüyordu. Çok benzer görünüyor, ancak farklara dikkat edin (üstteki doğrudur).

Doğru:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Eski eğitim kodu:

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

kodu app.module.ts'e ekle Benim için çalıştı:

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

[...]

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