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

Aby móc korzystać z dwukierunkowego powiązania danych dla wejść formularza, należy zaimportować pakiet FormsModule do modułu Angular.

Aby uzyskać więcej informacji, zobacz oficjalny samouczek Angular 2 tutaj oraz oficjalną dokumentację formularzy .

Za użycie [(ngModel)] w kątowym 2, 4 & 5+, musisz zaimportować FormsModule z Angular form...

Jest również w tej ścieżce pod formami w repozytorium Angular na GitHub :

Angular / packages / forms / src / directives / ng_model.ts

Prawdopodobnie nie jest to zbyt przyjemne dla programistów AngularJS Jak można było używać ng-model wszędzie wcześniej, ale jako Angular próbuje oddzielić moduły, aby użyć tego, czego chcesz w danym momencie, ngModel jest teraz w FormsModule .

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

Więc po prostu poszukaj APLIKACJI.moduł.ts i upewnij się, że masz FormsModule zaimportowane...

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

Są to również aktualne komentarze startowe dla Angular4 ngModel w formularzach Module :

/**
 * `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ć swojego wejścia, Nie w formularz, można go użyć z ngModelOptions i zrobić samodzielny true ...

[ngModelOptions]="{standalone: true}"

Aby uzyskać więcej informacji, spójrz na ng_model w sekcji kątowej tutaj .

Musisz zaimportować moduł FormsModule.

Otwórz aplikację.moduł.ts i dodać linie

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

I

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

Zakładając, że stworzyłeś Nowy NgModule, powiedzmy AuthModule dedykowany do obsługi Twoich potrzeb uwierzytelniania, upewnij się, że zaimportujesz FormsModule do tego AuthModule również.

Jeśli będziesz używać FormsModule tylko {[16] } w AuthModule wtedy nie trzeba by importować FormModule W domyślnym AppModule.

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

Zapomnij o importowaniu w AppModule, Jeśli nie używasz FormsModule nigdzie indziej.

Proste rozwiązanie: w pliku app.moduł.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 aplikacji .moduł.ts:

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

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

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

Istnieją dwa kroki, które musisz wykonać, aby pozbyć się tego błędu:

1. import FormsModule w module aplikacji
2. podaj jako wartość importu w @ NgModule decorator

W zasadzie plik app.moduł.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 { }

Czasami, mimo że jesteśmy już importowani BrowserModule, FormsModule i innych powiązanych modułów, nadal możemy uzyskać ten sam błąd .

Wtedy zdałem sobie sprawę, że musimy importuj je w kolejności, co jest pominięte w moim przypadku. Więc kolejność powinna być jak BrowserModule, FormsModule, i ReactiveFormsModule.

Zgodnie z moim zrozumieniem, moduły funkcyjne powinny być zgodne zpodstawowymi modułami Angular.

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

Używam Angular 7.

Muszę zaimportować ReactiveFormsModule, ponieważ używam klasy FormBuilder do tworzenia reaktywnego formularza.

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

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

Musisz zaimportować FormsModule do modułu root , Jeśli ten komponent znajduje się w aplikacji root, czyli .moduł.ts

Uprzejmie otwórz aplikację.moduł.ts

Import FormsModule from @ angular/forms

Ex:

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

I

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

Importuj FormsModule do modułu aplikacji.

To pozwoli Twojej aplikacji działać dobrze.

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

NgModel jest częścią FormsModule. I powinien być importowany z @angular / forms do pracy z ngModel.

Proszę zmienić aplikację.moduł.ts jak następuje:

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

[...]

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

Jeśli musisz najpierw użyć [(ngModel)], musisz zaimportować FormsModule w app.module.ts, a następnie dodać listę importów. Coś takiego:

Plik app.moduł.ts

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

Plik app.komponent.ts

1. przykład: <input type="text" [(ngModel)]="name" >
2. a następnie <h1>your name is: {{name}} </h1>

Używam Angular 5.

W moim przypadku, musiałem zaimportować ReactiveFormsModule.

Plik app.moduł.ts (lub anymodule.moduł.ts):

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

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

Jeśli ktoś nadal otrzymuje błędy po zastosowaniu zaakceptowanego rozwiązania, może to być możliwe, ponieważ masz osobny plik modułu dla komponentu,w którym chcesz użyć właściwości ngModel w znaczniku input. W takim przypadku należy zastosować przyjęte rozwiązanie w module komponentu.plik ts również.

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

W Angular 4 składnia musi być

[(ngModel)]

Jeśli nadal otrzymujesz błąd po prawidłowym zaimportowaniu FormsModule, sprawdź w terminalu lub (konsola windows), ponieważ twój projekt nie jest kompilowany (z powodu innego błędu, który może być cokolwiek) i Twoje rozwiązanie nie zostało odzwierciedlone w Twojej przeglądarce!

W moim przypadku moja konsola miała następujący niepowiązany błąd:

Właściwość 'retrieveGithubUser' nie istnieje dla typu 'ApiService'.

Import FormModule w pliku app.Moduł

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

W module, którego chcesz użyć ngModel musisz zaimportować FormsModule

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

W ngModule musisz zaimportować FormsModule, ponieważ ngModel pochodzi z FormsModule. Proszę zmodyfikować swoją aplikację .moduł.ts podobnie 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 { }

NgModel pochodzi z FormsModule. Istnieją pewne przypadki, kiedy można otrzymać tego rodzaju błąd:

1. nie zaimportowałeś FormsModule do tablicy import modułów, w której zadeklarowany jest Twój komponent - komponent, w którym używany jest ngModel.
2. musisz zaimportować FormsModule do jednego modułu, który jest dziedziczony z innego modułu. W tym przypadku masz dwie opcje:

• Niech formularze zostaną zaimportowane do tablicy import z oba moduły: module1 i module2. zgodnie z zasadą: Importowanie modułu nie zapewnia dostępu do jego zaimportowanych modułów. (Import nie jest dziedziczony)

  

• Zadeklaruj FormsModule do tablic importu i eksportu w module1, aby móc go zobaczyć również w module2

  

1. (w jakiejś wersji napotkałem ten problem) poprawnie zaimportowałeś FormsModule, ale problem jest na wprowadź znacznik HTML. Należy dodać atrybut tag name dla wejścia, a nazwa obiektu w [(ngModel)] musi być taka sama jak nazwa w atrybucie name

   

NgModel powinien być importowany z @angular/forms ponieważ jest częścią FormsModule. Więc radzę ci zmienić aplikację.moduł.ts w coś takiego:

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

Dla mojego scenariusza, 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 { }

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

Na przykład masz 2 moduły z module1.componentA.komponent.ts i module2.componentC.komponent.ts i spróbuj użyć selektora z module1.componentA.komponent.ts w szablonie wewnątrz module2 (np. <module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2">), wyrzuci błąd, że someInputVariableInModule1 nie jest dostępny wewnątrz module1.componentA.komponent.ts-mimo że masz @Input() someInputVariableInModule1 w module1.componentA.

Jeśli tak się stanie, chcesz udostępnić module1.componentA ma być dostępna w innych modułach. Więc jeśli współdzielisz module1.componentA wewnątrz sharedModule, module1.componentA będzie użyteczna wewnątrz innych modułów (poza module1), a każdy moduł importujący sharedModule będzie mógł uzyskać dostęp do selektora w swoich szablonach wstrzykując zadeklarowaną zmienną @Input().

To jest dla ludzi, którzy używają zwykłego JavaScript zamiast Type Script. 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ś również powiedzieć ładowaczowi modułów, aby załadował ng.forms.FormsModule. Po dokonaniu zmian Moja imports właściwość metody NgModule wyglądała następująco:

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

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

Ukończyłem migrację (wprowadzając nowy plik app.module.ts, zmieniając {[1] } na nowe wersje i brakujące moduły, a na koniec zmieniając mój main.ts, aby odpowiednio uruchomić, na podstawie przykładu Angular2 quick start example ).

Zrobiłem npm update, a następnie npm outdated, aby potwierdzić, że zainstalowane wersje były poprawne, nadal bez powodzenia.

Skończyło się na całkowitym wyczyszczeniu node_modules folderu i ponownej instalacji za pomocą npm install - Voila! Problem rozwiązany.

Kiedy pierwszy raz zrobiłem tutorial, main.ts wyglądało nieco inaczej niż teraz. Wygląda bardzo podobnie, ale zwróć uwagę na różnice (górna jest poprawna).

Poprawny:

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

platformBrowserDynamic().bootstrapModule(AppModule);

Stary kod tutoriala:

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

Dla dowolnej wersji z Angular 2, musisz zaimportować FormsModule do swojej aplikacji.moduł.plik ts i naprawi problem.