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

296

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ć?

Vijay Kumar
źródło
28
Musisz dodać FormsModuledo imports: []modułu, w którym używasz ngModel. W przeciwnym razie opublikuj swój kod.
Günter Zöchbauer
9
Nie mogę myśleć, że wszyscy nowi programiści Angular 2 i 4 zmierzą się z tym właśnie problemem (łącznie ze mną). Kiedy ostatni raz używałeś Angulara i nie chciałeś gdzieś używać ngModela? Nie rozumiem, dlaczego FormsModule nie jest domyślnie dołączony ...
Mike Gledhill,
Jeśli chodzi o wartość, napotkałem ten błąd w IONIC-4 (4.11.0) podczas pracy z sprawdzaniem poprawności formularzy. Jeśli nic więcej nie robię oprócz dodania formControlName = "myControl" do dowolnego <ion-input> w dowolnym miejscu formularza, otrzymuję komunikat o błędzie wiązania ngModel. Alternatywne właściwości, takie jak formControlName1 = „myControl” nie powodują tego błędu.
Memetican

Odpowiedzi:

674

Aby użyć dwukierunkowego wiązania danych dla danych wejściowych formularza, musisz zaimportować FormsModulepakiet do modułu Angular.

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

@NgModule({
    imports: [
         FormsModule      
    ]

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,

    import { FormsModule } from '@angular/forms';
    
    @NgModule({
        imports: [
            FormsModule      
        ]
  • Sprawdź składnię / pisownię [(ngModel)]w znaczniku wejściowym

Sajeetharan
źródło
27
Jaki jest związek między ngModel a FormsModule? Jednak to nie działa dla mnie.
Govind,
4
FormsModule zapewnia dodatkowe wytyczne dotyczące elementów formularza, w tym wprowadzania, wyboru itp. Dlatego jest to wymagane. Nie zapomnij zaimportować FormsModule do tego samego modułu, który deklaruje komponenty zawierające powiązania elementów formularza.
Bob
1
Co robimy, jeśli używamy tego w pliku komponentu ts?
Mike Warren,
1
nie należy importować do
pliku
@ Sajeetharan co zrobić, jeśli mam szablon w moim komponencie, który używa modelu ng w jakimś elemencie formularza?
CJBrew
18

To dobra odpowiedź. musisz zaimportować FormsMoudle

pierwszy w app.module.ts

**

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

** drugi w app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        FormsModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

Pozdrowienia i nadzieja będą pomocne

Hatem
źródło
Czy konieczny jest drugi krok, zmiana app.component.ts ?
Konrad Viltersten
8

Twój ngModelnie działa, ponieważ nie jest jeszcze częścią twojego NgModule.

Musisz powiedzieć NgModule, że masz uprawnienia do korzystania z ngModelcałej aplikacji. Możesz to zrobić, dodając FormsModuledo swojego app.module.ts-> imports-> [].

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

@NgModule({

   imports: [ FormsModule ],       // HERE

   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })
Shubham Verma
źródło
7

Wystąpił ten błąd podczas testowania mojej aplikacji Angular 6 z Karma / Jasmine. Zaimportowałem już FormsModuledo 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ć FormsModuledo mojego TestBed TestingModule.

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      FormsModule
    ],
    declarations: [
      RegisterComponent
    ]
  })
  .compileComponents();
}));
Rachunek
źródło
4

Na app.module.tsdodatek w tym:

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

@NgModule({
    declarations: [AppComponent],
    imports: [FormsModule],
})
DURGESZ CHOURASIYA
źródło
6
Jaką dodatkową wartość dodaje ta odpowiedź do istniejących odpowiedzi?
Günter Zöchbauer
4
nie dodaje żadnej wartości do odpowiedzi, a format kodu jest nieprawidłowy. Mylące dla początkujących.
ssmsnet
3
Ten fragment kodu może rozwiązać pytanie, ale wyjaśnienie naprawdę pomaga poprawić jakość posta. Pamiętaj, że w przyszłości odpowiadasz na pytanie dla czytelników, a ci ludzie mogą nie znać przyczyn Twojej sugestii kodu.
Clijsters,
4

Wszystkie wyżej wymienione rozwiązania problemu są prawidłowe. Ale jeśli używasz leniwego ładowania, musisz FormsModulezaimportować do modułu potomnego, który zawiera formularze. Dodanie go app.module.tsnie pomoże.

Ramya
źródło
3

wprowadź opis zdjęcia tutajPró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. wprowadź opis zdjęcia tutaj

Arpit Sharma
źródło
2

Spróbuj dodać

ngModel na poziomie modułu

Kod jest taki sam jak powyżej

Thoopalliamar
źródło
2

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:

import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [CommonModule, FormsModule], // the order can be random now;
  ...
})

Jeśli leży w twoim app.module.ts, dodaj te moduły:

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports:      [ FormsModule, BrowserModule ], // order can be random now
  ...
})

Proste demo, aby udowodnić sprawę.

Hearen
źródło
2

Odpowiedź była błędna w pisowni ngModel. Napisałem to tak: ngModuletak powinno być ngModel.

Wszystkie inne próby oczywiście nie rozwiązały błędu dla mnie.

Dyary
źródło
Tak, to też mi się przydarzyło ... Model! = Moduł Dlaczego to nie idzie do mojego mózgu!
Rahul Sonwanshi
1

import { FormsModule } from '@angular/forms'; // <<<< zaimportuj go tutaj

BrowserModule, FormsModule // <<<< i tutaj

Więc po prostu szuka app.module.tslub innego pliku modułu i upewnij się, że FormsModulezaimportowałeś ...

Manoj Gohel
źródło
1

W moim przypadku dodałem brakujący import, którym był ReactiveFormsModule.

S34N
źródło
1

importuj moduł formularza z app.module.ts.

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


@NgModule({
  declarations: [
    AppComponent,
    ContactsComponent
  ],
  imports: [
    BrowserModule,HttpModule,FormsModule     //Add here form  module
  ],
  providers: [],
  bootstrap: [AppComponent]
})

W html:

<input type="text" name="last_name" [(ngModel)]="last_name" [ngModelOptions]="{standalone: true}" class="form-control">
Brahmmeswara Rao Palepu
źródło
Użyłem formularza w html i zaimportowałem moduł formularzy w app.madule.ts like- import {FormsModule} z '@ angular / form' i dodałem ten FormsModule w imporcie.
Brahmmeswara Rao Palepu
1

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

pragapraga
źródło
1

Powinieneś zweryfikować następujące rzeczy, jeśli dwustronne wiązanie nie działa.

W html należy tak nazwać ngModel. Nie ma zależności od innego atrybutu elementu wejściowego

<input [(ngModel)]="inputText">

Upewnij się, że FormsModule jest importowany do pliku modułów app.modules.ts

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

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent // suppose, this is the component in which you are trying to use two ay binding
    ],
    imports: [
        BrowserModule,
        FormsModule,
        // other modules
],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Upewnij się, że składnik, w którym próbujesz użyć ngModel do wiązania dwukierunkowego, jest dodany w deklaracjach. Kod dodany w poprzednim punkcie # 2

To wszystko, co musisz zrobić, aby wiązanie dwukierunkowe za pomocą ngModel działało, jest to potwierdzone do kąta 9

Avinash
źródło
0

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:

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})
Swapnil G. Thaware
źródło
0

najpierw zaimportuj FormsModule, a następnie użyj ngModel w pliku component.ts

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

Kod HTML:

<input type='text' [(ngModel)] ="usertext" />
Shakti Srivastav
źródło
0

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.

Lucas Simões
źródło