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


1373

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

11
Co to jest Hero Plucker?
IronAces,

3
Mam ten sam problem, ponieważ zaktualizowali wczoraj rc5 (co ciekawe, działa dla mojego kolegi ...) Myślę, że @abreneliere mówi o swoich tutorialach - angular.io/docs/ts/latest/tutorial
PetLahev

4
@DanielShillcock, Tour of Heroes plunker .
Mark Rajcok,

2
Tak, odniosłem się do samouczka Tour of heroes, ponieważ używa on ngModel.
Anthony Brenelière,

5
Patrzę tylko na Angulara i zobaczyłem ten błąd podczas samouczka Tour of Heroes. Rzeczywiście, teraz wywołują to w następnej linii i mówią ci, jak / dlaczego to poprawić.
Matt Penner,

Odpowiedzi:


1918

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

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

[...]

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

14
Właściwie wolę tę odpowiedź od Gabriele (która jest tylko linkiem). Tutaj przedstawiony jest dokładny kod. Irytujące jest to, że natrafiłem na ten problem po „Wstępie do Angulara 2” Johna Papsa na PluralSight, a ten problem nie został nawet wspomniany. Dla nich właśnie zadziałało wiązanie dwukierunkowe.
Mike Gledhill

20
To działało, ale dopiero po zaimportowaniu go do mojego podmodułu. Dla początkujących nie jest całkowicie jasne, że nie są dziedziczone przez podmoduły.
adam0101

3
W moim przypadku moje użycie aparatów ortodontycznych było nieprawidłowe. Używałem [{ngModel}]zamiast właściwego:[(ngModel)]
Imtiaz

29
Dla tych, którzy znajdą to z powodu podobnej awarii Jasmine, musisz również dodać te importy do component.spec.tspliku.
theMayer

3
A gdzie to umieścić (odnośnie błędu Jasmine): stackoverflow.com/questions/39584534/…
bagsmode,

533

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


9
Muszę przyznać, że zacząłem od Angulara w poniedziałek (czyli 4 dni temu) i robiłem ich tutoriale, więc jestem pewien, że zrobiłem coś złego, ale importowanie FormsModule nie działało. Następnie dodałem import { FORM_DIRECTIVES } from '@angular/forms';i dodałem FORM_DIRECTIVESdo dyrektyw i tak, moje wiązanie znów działa (żeby było jasne, działało przed wydaniem
RC5

2
Co wydaje się być związane z tym stackoverflow.com/questions/31623879/…
PetLahev

1
@PetLahev problem z samouczkiem polega na tym, że 7 sierpnia, kiedy zacząłeś, w samouczkach działał Release Candidate 4. Od 8 sierpnia są w Release Candidate 5, który ma inną składnię
AJ Zane

5
FORM_DIRECTIVESnie żyją na wszelki wypadek
Toolkit

6
Nic nie warte tego, że jeśli używasz SharedModule, być może będziesz musiał zaimportować tam również FormsModule.
Różnica

241

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


95

Musisz zaimportować moduł FormsModule

Otwórz app.module.ts

i dodaj linię

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

i

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

54

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.


Potrzebowałem go w podmodule, w którym korzystałem z funkcji Formularza. Wyższa hierarchia nie była wystarczająca.
Zarepheth,

45

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

28
Gdzie dokładnie jest różnica w dwóch przykładach?
Philipp Meissner,

w moim przypadku musiałem zaimportować FormsModule na moim
module.module.ts

40

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

wprowadź opis zdjęcia tutaj


39

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


Dziękuję Ci! Nie zadeklarowałem tego w sekcji importu i doprowadzało mnie to do szaleństwa, kiedy przeniosłem komponent do podmodułu.
Richard

30

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

28

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

24

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

22

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>

19

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
  ],
  [...]
})

18

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.


18

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

ReactiveFormsModulejest wymagane, gdy potrzebujesz FormGroup, FormControl ,Validatorsitp. Do korzystania ngModelnie potrzebujesz ReactiveFormsModule.
Amit Chigadani,

@AmitChigadani Dodawanie ReactiveFormModule jest jedyną rzeczą, która sprawiła, że ​​błąd zniknął w moim przypadku. Używam Angular 7.
Eternal21

17

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.


15

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


13

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

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

Brakowało mi tego w moim app.module.ts, dziękuję Malindu!
Omzig

11

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)

wprowadź opis zdjęcia tutaj

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

wprowadź opis zdjęcia tutaj

  1. (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

    wprowadź opis zdjęcia tutaj


11

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

10

importuj FormModule app.module

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

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

8

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


1
Mam dokładnie ten problem i mówisz, że powinieneś udostępnić moduł, abyś mógł używać komponentu A w ComponentC. Ale .. Jak mogę udostępnić moduł1? Który jest sintax „udostępniać moduł”? Domyślam się, że eksportowanie modułu 1, a następnie importowanie go do modułu 2 wystarczyło do dzielenia się, ale nadal mam ten problem
Agorilla

2
Aby odpowiedzieć sobie, w ten sposób udostępniasz moduł angular-2-training-book.rangle.io/handout/modules/…
Agorilla

2
Hej, przepraszam, nie widziałem twojego komentarza tak szybko :) Tak, w ten sposób możesz stworzyć SharedModule i zaimportować tam własne moduły, których chcesz użyć w wielu innych modułach. Następnie zaimportujesz moduł SharedModule, w którym chcesz użyć modułu zaimportowanego do modułu współdzielonego.
Guntram,

8

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

8

Musisz zaimportować moduł FormsModule

Otwórz app.module.ts

i dodaj linię

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

i

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

8

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ś .. :)


7

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!


6

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.


5

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

3

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

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

[...]

@NgModule({
imports: [
[...]
FormsModule
],
[...]
})
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.