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


296

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

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

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


28
당신은 추가 할 필요가 FormsModuleimports: []사용하는 모듈 ngModel. 그렇지 않으면 코드를 게시하십시오.
Günter Zöchbauer

9
모든 새로운 Angular 2 & 4 개발자 가이 정확한 문제에 도달 할 것이라고 생각할 수 없습니다 (자체 포함). Angular를 마지막으로 사용하고 언제 ngModel을 사용하고 싶지 않았 습니까? 나는 FormsModule 단지 기본적으로 포함되지 않는 이유 .... 이해가 안 돼요
마이크 Gledhill

가치있는 것으로 인해 양식 유효성 검사로 작업 할 때 IONIC-4 (4.11.0) 에서이 오류가 발생했습니다. 양식의 임의의 <ion-input>에 formControlName = "myControl"을 추가하는 것 외에 다른 작업을 수행하지 않으면 ngModel 바인딩 오류 메시지가 나타납니다. formControlName1 = "myControl"과 같은 대체 특성으로 인해이 오류가 발생하지 않습니다.
Memetican

답변:


674

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

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

@NgModule({
    imports: [
         FormsModule      
    ]

편집하다

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

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

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

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


27
ngModel과 FormsModule의 관계는 무엇입니까? 그러나 이것은 나를 위해 작동하지 않습니다.
Govind

4
FormsModule은 입력, 선택 등을 포함하여 양식의 요소에 대한 추가 지시문을 제공합니다. 이것이 필요한 이유입니다. 양식 요소 바인딩이 포함 된 컴포넌트를 선언하는 동일한 모듈에서 FormsModule을 가져 오는 것을 잊지 마십시오.
Bob

1
컴포넌트 ts 파일에서 이것을 사용하는 경우 어떻게해야합니까?
Mike Warren

1
component.ts로 가져 와서는 안됩니다
Sajeetharan

@Sajeetharan 컴포넌트에 ng-model을 사용하는 템플릿이있는 양식 요소가있는 경우 어떻게해야합니까?
CJBrew

18

정답입니다. 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();
  }));

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


app.component.ts를 변경하는 두 번째 단계가 필요합니까?
Konrad Viltersten

8

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

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

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

@NgModule({

   imports: [ FormsModule ],       // HERE

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

7

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

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

4

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

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

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

6
이 답변이 기존 답변에 어떤 추가 가치가 있습니까?
Günter Zöchbauer

4
답변에 값을 추가하지 않고 코드 형식이 잘못되었습니다. 초보자에게 혼란.
ssmsnet

3
이 코드 스 니펫은 문제를 해결할 수 있지만 설명을 포함하면 게시물의 품질을 향상시키는 데 실제로 도움이됩니다. 앞으로 독자에게 질문에 대한 답변을 제공하고 있으며 해당 사람들이 코드 제안의 이유를 모를 수도 있습니다.
Clijsters

4

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


3

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

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



2

Angular 7.xx로 업데이트하면 내 모듈 중 하나에서 동일한 문제가 발생합니다 .

독립 모듈에있는 경우 다음과 같은 추가 모듈을 추가하십시오.

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

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

에있는 경우 app.module.ts다음 모듈을 추가 하십시오 .

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

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

사례를 증명 하는 간단한 데모 .


2

나를위한 답변의 철자가 잘못되었습니다 ngModel. : 나는 다음과 같이 기록했다 ngModule그것이 있어야하는 동안 ngModel.

다른 모든 시도는 분명히 오류를 해결하지 못했습니다.


Ya, 이것은 나에게도 일어났다 ... Model! = Module 왜 내 뇌에 가지 않습니까!
라훌 손완시

1

import { FormsModule } from '@angular/forms'; // <<<< 여기로 가져 오기

BrowserModule, FormsModule // <<<< 그리고 여기

따라서 app.module.ts또는 다른 모듈 파일을 FormsModule찾아서 가져 왔는지 확인하십시오 .


1

제 경우에는 누락 된 가져 오기를 추가했습니다 ReactiveFormsModule.


1

app.module.ts에서 양식 모듈을 가져옵니다.

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


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

html로 :

<input type="text" name="last_name" [(ngModel)]="last_name" [ngModelOptions]="{standalone: true}" class="form-control">

html로 양식을 사용하고 app.madule.ts의 양식 모듈을 '@ angular / forms'에서 import {FormsModule}로 가져 와서 해당 FormsModule을 가져 오기에 추가했습니다.
Brahmmeswara Rao Palepu

1

내 경우에는 철자가 틀렸다. 나는 ng M odel 대신 ngmodel i로서 언급하고 있었다. :) 희망이 도움이된다!

예상-[(ngModel)] 실제-[(ngmodel)]


1

양방향 바인딩이 작동하지 않으면 다음 사항을 확인해야합니다.

html에서 ngModel은 이런 식으로 호출되어야합니다. 입력 요소의 다른 속성에 의존하지 않습니다

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

Sure FormsModule을 모듈 파일로 가져 오기 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 { }

양방향 바인딩에 ngModel을 사용하려는 구성 요소가 선언에 추가되었는지 확인하십시오. 이전 지점 # 2에 추가 된 코드

이것은 ngModel 작업을 사용하여 양방향 바인딩을 수행하는 데 필요한 모든 것입니다. 각도 9까지 검증됩니다.


0

양식 입력에 양방향 데이터 바인딩을 사용하려면 Angular 모듈에서 FormsModule 패키지를 가져와야합니다. 자세한 내용은 여기 Angular 2 공식 자습서 및 양식 공식 문서를 참조하십시오.

app.module.ts에서 아래 줄을 추가하십시오.

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

[...]

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

0

먼저 FormsModule을 가져온 다음 component.ts에서 ngModel을 사용하십시오.

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

HTML 코드 :

<input type='text' [(ngModel)] ="usertext" />

0

양식 모듈을 가져온 후에도 문제가 지속되면 입력에 페이지의 다른 입력 과 같은 값을 가진 "이름"속성이 없는지 확인 하십시오.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.