Nie można powiązać z „ngModel”, ponieważ nie jest to znana właściwość „input”

Wystąpił następujący błąd podczas uruchamiania mojej aplikacji Angular, nawet jeśli składnik nie jest wyświetlany.

Muszę skomentować, <input>aby moja aplikacja działała.

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: 

Patrzę na plunkera Hero, ale nie widzę żadnej różnicy w moim kodzie.

Oto plik komponentu:

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

Tak, to wszystko, w app.module.ts właśnie dodałem:

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

[...]

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

Aby móc używać dwukierunkowego wiązania danych do formularzy, należy zaimportować FormsModulepakiet do Angularmodułu. Aby uzyskać więcej informacji, zobacz Angular 2oficjalny samouczek tutaj i oficjalną dokumentację formularzy

Aby używać [(ngModel)]w Angular 2 , 4 i 5+ , musisz zaimportować FormsModule z Angular formularza ...

Również znajduje się na tej ścieżce w formularzach w Angular repo w github :

angular / packages / form / src / directives / ng_model.ts

Prawdopodobnie nie jest to zbyt przyjemne dla programistów AngularJs, ponieważ w dowolnym momencie możesz używać ng-model wszędzie, ale ponieważ Angular próbuje oddzielić moduły, aby użyć tego, co chcesz, aby było w tym czasie, ngModel jest teraz w FormsModule .

Również jeśli używasz ReactiveFormsModule, musisz go również zaimportować.

Po prostu poszukaj app.module.ts i upewnij się, że FormsModulezaimportowałeś ...

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

Oto także bieżące komentarze początkowe dla Angular4 ngModelw FormsModule :

/**
 * `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!
 */

Jeśli chcesz użyć danych wejściowych, a nie w formie, możesz użyć ich ngModelOptionsi sprawić, aby samodzielna była prawdziwa ...

[ngModelOptions]="{standalone: true}"

Aby uzyskać więcej informacji, spójrz na ng_model w sekcji Angular tutaj

Musisz zaimportować moduł FormsModule

Otwórz app.module.ts

i dodaj linię

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

i

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

Wrzucenie tego może komuś pomóc.

Po utworzeniu nowego NgModule, powiedzmy Zakładając AuthModulededykowany do obsługi swoich potrzeb uwierzytelniania, upewnij się, że import FormsModulew tym AuthModule zbyt .

Jeśli będziesz używać FormsModuleTYLKO w AuthModule, nie będziesz musiał importować FormModuleIN domyślnieAppModule

Więc coś takiego w 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 { }

Następnie zapomnij o importowaniu, AppModulejeśli nie używasz FormsModulenigdzie indziej.

Prosta dusza: w app.module.ts

Przykład 1

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

imports: [
 BrowserModule,
 FormsModule
 ],

Przykład 2

Jeśli chcesz użyć [(ngModel)], musisz zaimportować FormsModule do app.module.ts

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

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

Zaimportuj FormsModule do tych modułów, w których chcesz użyć [(ngModel)]

Aby pozbyć się tego błędu, musisz wykonać dwa kroki

1. zaimportuj FormsModule do modułu aplikacji
2. Przekaż go jako wartość importu w dekoratorze @NgModule

w zasadzie app.module.ts powinien wyglądać jak poniżej:

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

Mam nadzieję, że to pomoże

Musisz zaimportować FormsModule do modułu głównego , jeśli ten komponent znajduje się w katalogu głównym, tj. App.module.ts

Uprzejmie otwórz app.module.ts

Importuj FormsModule z @ angular / form

Dawny:

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

i

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

Używam Angulara 7

Muszę zaimportować ReactiveFormsModule, ponieważ używam klasy FormBuilder do tworzenia formularzy reaktywnych.

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

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

zaimportuj FormsModule do swojego modułu aplikacji.

pozwoli to na poprawne działanie aplikacji.

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

Jeśli trzeba użyć [(ngModel)]najpierw zrobić trzeba importować FormsModulew app.module.ts, a następnie dodać do listy importu. Coś takiego:

app.module.ts

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

app.component.ts

1. Przykład: <input type="text" [(ngModel)]="name" >
2. i wtedy <h1>your name is: {{name}} </h1>

ngModel jest częścią FormsModule. I powinien zostać zaimportowany z @ angular / form do pracy z ngModel.

Zmień plik app.module.ts w następujący sposób:

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

[...]

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

Jeśli po zastosowaniu zaakceptowanego rozwiązania ktoś nadal otrzymuje błędy, może to być spowodowane tym, że masz osobny plik modułu dla komponentu, w którym chcesz użyć właściwości ngModel w znaczniku wejściowym. W takim przypadku zastosuj również zaakceptowane rozwiązanie w pliku module.ts komponentu.

Używam Angulara 5.

W moim przypadku musiałem również zaimportować RactiveFormsModule.

app.module.ts (lub anymodule.module.ts)

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

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

Wiem, że to pytanie dotyczy Angulara 2, ale korzystam z Angulara 4 i żadna z tych odpowiedzi nie pomogła.

W Angular 4 składnia musi być

[(ngModel)]

Mam nadzieję że to pomoże.

jeśli nadal pojawia się błąd po prawidłowym zaimportowaniu modułu FormsModule, to sprawdź terminal lub konsolę Windows, ponieważ projekt się nie kompiluje (z powodu innego błędu, który może być dowolny), a rozwiązanie nie zostało odzwierciedlone w przeglądarce!

W moim przypadku w mojej konsoli wystąpił następujący niepowiązany błąd: Właściwość „retrieveGithubUser” nie istnieje dla typu „ApiService”.

W module, z którego chcesz korzystać ngModel , musisz zaimportować FormsModule

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

ngModel pochodzi z FormsModule. Istnieją pewne przypadki, w których można otrzymać tego rodzaju błąd:

1. Nie zaimportowano FormsModule do tablicy importu modułu, w którym zadeklarowano komponent, komponent, w którym używany jest ngModel.
2. Zaimportowałeś FormsModule do jednego modułu, który jest dziedziczony z innego modułu. W takim przypadku masz dwie opcje:
   • pozwól FormsModule zaimportować do tablicy importu z obu modułów: module1 i modułu2. Z reguły: importowanie modułu NIE zapewnia dostępu do jego importowanych modułów (importy nie są dziedziczone)

• zadeklaruj FormsModule w tablicach importu i eksportu w module 1, aby móc go zobaczyć również w modelu 2

3. (W niektórych wersjach napotkałem ten problem) Zaimportowałeś poprawnie moduł FormsModule, ale problem dotyczy wejściowego znacznika HTML. Musisz dodać atrybut tagu nazwy dla danych wejściowych, a nazwa obiektu powiązana w [(ngModel)] musi być taka sama jak nazwa do atrybutu name

   

W ngModulemusisz zaimportować FormsModule, ponieważ ngModelpochodzi z FormsModule. Zmodyfikuj plik app.module.ts, tak jak poniższy kod, który udostępniłem

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

importuj FormModule app.module

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

Czasami pojawia się ten błąd, gdy próbujesz użyć komponentu z modułu, który nie jest współużytkowany, w innym module.

Na przykład masz 2 moduły z module1.componentA.component.ts i module2.componentC.component.ts i próbujesz użyć selektora z module1.componentA.component.ts w szablonie wewnątrz modułu 2 (np. <module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2">), Wyrzuci błąd polegający na tym, że niektóreInputVariableInModule1 nie jest dostępne w module1.componentA.component.ts - nawet jeśli masz@Input() someInputVariableInModule1 w module1.componentA.

Jeśli tak się stanie, chcesz udostępnić moduł1.componentA, aby był dostępny w innych modułach. Jeśli więc udostępnisz moduł1.componentA w module współdzielonym, moduł1.componentA będzie można używać w innych modułach (poza modułem 1), a każdy moduł importujący moduł współdzielony będzie mógł uzyskać dostęp do selektora w swoich szablonach, wstrzykując @Input()deklarowaną zmienną.

W moim scenariuszu musiałem zaimportować zarówno [CommonModule], jak i [FormsModule] do mojego modułu

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

Musisz zaimportować moduł FormsModule

Otwórz app.module.ts

i dodaj linię

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

i

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

Czasami, gdy jesteśmy już zaimportowane BrowserModule, FormsModulei inne pokrewne Moduły chociaż Mam ten sam błąd wtedy zdałem sobie sprawę, że potrzebujemy importować je w kolejności , w moim przypadku brakowało mi go. Więc kolejność powinna być jak 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 {}

Mam nadzieję, że to pomoże komuś .. :)

To jest dla osób, które używają zwykłego JavaScript zamiast skryptu. Oprócz odwoływania się do pliku skryptu formularzy na górze strony, jak poniżej

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

powinieneś także powiedzieć modułowi ładującemu, aby załadował ng.forms.FormsModule. Po wprowadzeniu zmian moja importswłaściwość NgModulemetody wyglądała jak poniżej

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

Miłego kodowania!

Uaktualniłem z RC1 do RC5 i otrzymałem ten błąd.

Ukończyłem migrację (wprowadzając nowy app.module.tsplik, zmieniając w package.jsoncelu uwzględnienia nowych wersji i brakujących modułów, i wreszcie zmieniając odpowiednio mój main.tssystem do rozruchu, na podstawie przykładu szybkiego uruchamiania Angular2 ).

Zrobiłem npm updatei wtedynpm outdated aby potwierdzić, że zainstalowane wersje są prawidłowe, nadal nie mam szczęścia.

Skończyłem całkowicie wycierać node_modulesfolder i instalować ponownie za pomocą npm install- Voila! Problem rozwiązany.

Kiedy po raz pierwszy zrobiłem samouczek, main.ts wyglądał nieco inaczej niż obecnie. Wygląda bardzo podobnie, ale zwróć uwagę na różnice (pierwsza jest poprawna).

Poprawny:

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

platformBrowserDynamic().bootstrapModule(AppModule);

Stary kod samouczka:

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

dodaj kod do app.module.ts To zadziałało dla mnie:

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

[...]

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