[angular] 각도 오류 : ” ‘ngModel’은 (는) ‘입력’의 알려진 속성이 아니기 때문에 바인딩 할 수 없습니다”

Angular 4를 사용하고 있으며 콘솔에서 오류가 발생합니다.

‘input’의 알려진 속성이 아니기 때문에 ‘ngModel’에 바인딩 할 수 없습니다.

이 문제를 어떻게 해결할 수 있습니까?



답변

양식 입력에 양방향 데이터 바인딩을 사용하려면 FormsModuleAngular 모듈에서 패키지 를 가져와야합니다 .

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

@NgModule({
    imports: [
         FormsModule
    ]

편집하다

동일한 문제에 대한 중복 질문이 많이 있으므로이 답변을 향상시키고 있습니다.

가능한 두 가지 이유가 있습니다

  • 누락 FormsModule되었으므로 이것을 모듈에 추가하십시오.

    import { FormsModule } from '@angular/forms';
    
    @NgModule({
        imports: [
            FormsModule
        ]
  • [(ngModel)]입력 태그에서 구문 / 맞춤법을 확인하십시오.


답변

정답입니다. FormsMoudle을 가져와야합니다.

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

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

안부와 희망이 도움이 될 것입니다


답변

귀하의 일부 ngModel가 아니기 때문에 귀하 가 작동하지 않습니다NgModule아직 .

앱 전체 NgModule에서 사용할 권한 이 있음을 말해야 합니다 .-> -> ngModel에 추가하면 FormsModule됩니다 .app.module.tsimports[]

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

@NgModule({

   imports: [ FormsModule ],       // HERE

   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })


답변

Karma / Jasmine으로 Angular 6 앱을 테스트 할 때이 오류가 발생했습니다. FormsModule최상위 모듈로 이미 가져 왔습니다 . 그러나 [(ngModel)]테스트 를 사용하는 새 구성 요소를 추가하면 실패했습니다. 이 경우 FormsModule내 에서 가져와야 했습니다 TestBed TestingModule.

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      FormsModule
    ],
    declarations: [
      RegisterComponent
    ]
  })
  .compileComponents();
}));


답변

이것을 app.module.ts추가하십시오 :

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

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


답변

위에서 언급 한 문제에 대한 모든 해결책이 맞습니다. 그러나 지연 로딩을 사용하는 경우 FormsModule양식이있는 하위 모듈로 가져와야합니다. 그것을 추가해도 app.module.ts도움이되지 않습니다.


답변

여기에 이미지 설명을 입력하십시오위에서 언급 한 모든 것을 시도했지만 여전히 작동하지 않습니다.

하지만 마침내 Angular 사이트에서 문제를 발견했습니다 .module.ts에서 formModule을 가져 오십시오. 여기에 이미지 설명을 입력하십시오