Korzystam z Angulara 4 i pojawia się błąd w konsoli:
Nie można powiązać z „ngModel”, ponieważ nie jest to znana właściwość „input”
Jak mogę to rozwiązać?
angular
typescript
angular-ngmodel
angular-forms
Vijay Kumar
źródło
źródło
FormsModule
doimports: []
modułu, w którym używaszngModel
. W przeciwnym razie opublikuj swój kod.Odpowiedzi:
Aby użyć dwukierunkowego wiązania danych dla danych wejściowych formularza, musisz zaimportować
FormsModule
pakiet do modułu Angular.EDYTOWAĆ
Ponieważ istnieje wiele zduplikowanych pytań z tym samym problemem, wzmacniam tę odpowiedź.
Istnieją dwa możliwe powody
Brakuje
FormsModule
, dlatego dodaj to do swojego modułu,Sprawdź składnię / pisownię
[(ngModel)]
w znaczniku wejściowymźródło
To dobra odpowiedź. musisz zaimportować FormsMoudle
pierwszy w app.module.ts
**
** drugi w app.component.spec.ts
Pozdrowienia i nadzieja będą pomocne
źródło
Twój
ngModel
nie działa, ponieważ nie jest jeszcze częścią twojegoNgModule
.Musisz powiedzieć
NgModule
, że masz uprawnienia do korzystania zngModel
całej aplikacji. Możesz to zrobić, dodającFormsModule
do swojegoapp.module.ts
->imports
->[]
.źródło
Wystąpił ten błąd podczas testowania mojej aplikacji Angular 6 z Karma / Jasmine. Zaimportowałem już
FormsModule
do modułu najwyższego poziomu. Ale kiedy dodałem nowy komponent, który wykorzystał[(ngModel)]
moje testy zaczęły się nie udać. W takim przypadku musiałem zaimportowaćFormsModule
do mojegoTestBed
TestingModule
.źródło
Na
app.module.ts
dodatek w tym:źródło
Wszystkie wyżej wymienione rozwiązania problemu są prawidłowe. Ale jeśli używasz leniwego ładowania, musisz
FormsModule
zaimportować do modułu potomnego, który zawiera formularze. Dodanie goapp.module.ts
nie pomoże.źródło
Próbowałem wszystkich rzeczy wymienionych powyżej, ale nadal nie działa.
ale w końcu znalazłem problem w witrynie Angular. Spróbuj zaimportować formModule do module.ts, to jest to.
źródło
Spróbuj dodać
Kod jest taki sam jak powyżej
źródło
Zaktualizuj z Angular 7.xx , napotkasz ten sam problem w jednym z moich modułów .
Jeśli leży w niezależnym module, dodaj te dodatkowe moduły:
Jeśli leży w twoim
app.module.ts
, dodaj te moduły:Proste demo, aby udowodnić sprawę.
źródło
Odpowiedź była błędna w pisowni
ngModel
. Napisałem to tak:ngModule
tak powinno byćngModel
.Wszystkie inne próby oczywiście nie rozwiązały błędu dla mnie.
źródło
import { FormsModule } from '@angular/forms';
// <<<< zaimportuj go tutajBrowserModule, FormsModule
// <<<< i tutajWięc po prostu szuka
app.module.ts
lub innego pliku modułu i upewnij się, żeFormsModule
zaimportowałeś ...źródło
W moim przypadku dodałem brakujący import, którym był
ReactiveFormsModule
.źródło
importuj moduł formularza z app.module.ts.
W html:
źródło
W moim przypadku popełniłem błąd, mówiłem o ngmodel istead of M odel :) Mam nadzieję, że to pomaga!
Oczekiwany - [(ngModel)] Rzeczywisty - [(ngmodel)]
źródło
Powinieneś zweryfikować następujące rzeczy, jeśli dwustronne wiązanie nie działa.
<input [(ngModel)]="inputText">
To wszystko, co musisz zrobić, aby wiązanie dwukierunkowe za pomocą ngModel działało, jest to potwierdzone do kąta 9
źródło
Jeśli chcesz użyć dwukierunkowego powiązania danych dla danych wejściowych formularza, musisz zaimportować pakiet FormsModule do modułu Angular. Aby uzyskać więcej informacji, zobacz oficjalny samouczek Angular 2 tutaj oraz oficjalną dokumentację formularzy
w app.module.ts dodaj poniższe linie:
źródło
najpierw zaimportuj FormsModule, a następnie użyj ngModel w pliku component.ts
Kod HTML:
źródło
Jeśli nawet po zaimportowaniu modułu formularzy problem nadal występuje, sprawdź, czy dane wejściowe nie mają atrybutu „nazwa” o wartości równej innemu wejściowi na stronie.
źródło