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

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

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

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

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

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

Na app.module.tsdodatek w tym:

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

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

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.

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.

Spróbuj dodać

ngModel na poziomie modułu

Kod jest taki sam jak powyżej

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

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.

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

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

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

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

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

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

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" />

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.