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

질문자 :Anthony Brenelière

구성 요소가 표시되지 않는 경우에도 Angular 앱을 시작할 때 다음 오류가 발생합니다.

내 앱이 작동 <input> 을 주석 처리해야 합니다.

 zone.js:461 Unhandled Promise rejection: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'. (" <div> <label>Created:</label> <input type="text" [ERROR ->][(ngModel)]="test" placeholder="foo" /> </div> </div>"): InterventionDetails@4:28 ; Zone: <root> ; Task: Promise.then ; Value:

Hero plunker를 보고 있는데 내 코드와 별 차이가 없습니다.

다음은 구성 요소 파일입니다.

 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { Intervention } from '../../model/intervention'; @Component({ selector: 'intervention-details', templateUrl: 'app/intervention/details/intervention.details.html', styleUrls: ['app/intervention/details/intervention.details.css'] }) export class InterventionDetails { @Input() intervention: Intervention; public test : string = "toto"; }

그래 그거야. app.module.ts 파일에 다음을 추가했습니다.

 import { FormsModule } from '@angular/forms'; [...] @NgModule({ imports: [ [...] FormsModule ], [...] })

Anthony Brenelière

양식 입력에 양방향 데이터 바인딩을 사용하려면 Angular 모듈에서 FormsModule

자세한 내용은 여기 에서 Angular 2 공식 자습서 및 양식에 대한 공식 문서를 참조하십시오.

Gabriele Ciech

Angular 2 , 4 & 5+ 에서 [(ngModel)] 을 사용하려면 Angular 양식에서 FormsModule을 가져와야 합니다...

또한 GitHub 의 Angular 저장소 양식 아래 이 경로에 있습니다.

각도 / 패키지 / 양식 / src / 지시문 / ng_model.ts

아마도 이것은 이전에 언제 어디서나 ng-model을 사용할 수 있었기 때문에 AngularJS 개발자 에게 그다지 유쾌하지 않을 것입니다. 그러나 Angular는 그 당시에 사용하고 싶은 것을 사용하기 위해 모듈을 분리하려고 시도하므로 ngModel 은 이제 FormsModule에 있습니다. .

또한 ReactiveFormsModule 을 사용하는 경우에도 가져와야 합니다.

따라서 단순히 app.module.ts FormsModule 가져왔는지 확인하십시오.

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

또한, 이들은 Angular4의 현재 시작 주석이다 ngModel FormsModule으로는 :

 /** * `ngModel` forces an additional change detection run when its inputs change: * Eg: * ``` * <div>{{myModel.valid}}</div> * <input [(ngModel)]="myValue" #myModel="ngModel"> * ``` * Ie `ngModel` can export itself on the element and then be used in the template. * Normally, this would result in expressions before the `input` that use the exported directive * to have and old value as they have been * dirty checked before. As this is a very common case for `ngModel`, we added this second change * detection run. * * Notes: * - this is just one extra run no matter how many `ngModel` have been changed. * - this is a general problem when using `exportAs` for directives! */

당신이 아닌 형태로 입력을 사용하려는 경우, 당신은 그것을 사용할 수 있습니다 ngModelOptions 및 독립이 진정한 만들 ...

 [ngModelOptions]="{standalone: true}"

자세한 내용 은 여기 Angular 섹션의 ng_model 을 참조하세요.

Alireza

FormsModule을 가져와야 합니다.

app.module.ts를 열고 행을 추가하십시오.

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

그리고

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

PRao

새 NgModule을 만든 가정 할 때, 말을 AuthModule 당신의 인증 요구 사항을 처리 전용 수입에 있는지 확인 FormsModule 그것도 AuthModule에.

당신이 사용하게 될 경우 FormsModule 단지에 AuthModule 다음은 가져올 필요가 없을 것입니다 FormModule 기본에 AppModule .

AuthModule 에서 다음과 같이 됩니다.

 import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { authRouting } from './auth.routing'; import { LoginComponent, SignupComponent } from './auth.component'; @NgModule({ imports: [ authRouting, FormsModule ], declarations: [ SignupComponent, LoginComponent ] }) export class AuthModule { }

그런 다음 다른 곳 FormsModule 사용하지 않는 경우 AppModule 에서 가져오는 것을 잊어버리십시오.

KhoPhi

간단한 솔루션: app.module.ts 파일에서 -

실시예 1

 import {FormsModule} from "@angular/forms"; // Add in imports imports: [ BrowserModule, FormsModule ],

실시예 2

[(ngModel)]을 사용하려면 app.module.ts에서 FormsModule을 가져와야 합니다 .

 import { FormsModule } from "@angular/forms"; @NgModule({ declarations: [ AppComponent, videoComponent, tagDirective, ], imports: [ BrowserModule, FormsModule ], providers: [ApiServices], bootstrap: [AppComponent] }) export class AppModule { }

Shashwat Gupta

[(ngModel)]을 사용하려는 모듈에서 FormsModule을 가져옵니다.

Arul

이 오류를 제거하려면 두 단계를 따라야 합니다.

1. 앱 모듈에서 FormsModule 가져오기
2. @NgModule 데코레이터에서 가져오기 값으로 전달

기본적으로 app.module.ts 파일은 다음과 같아야 합니다.

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

debugmode

BrowserModule , FormsModule 및 기타 관련 모듈을 이미 가져온 경우에도 여전히 동일한 오류가 발생할 수 있습니다.

그런 다음 순서대로 가져와야 한다는 것을 깨달았습니다. 제 경우에는 누락되었습니다. 따라서 순서는 BrowserModule , FormsModule 및 ReactiveFormsModule 과 같아야 합니다.

내 이해에 따르면 기능 모듈 은 Angular 의 기본 모듈 을 따라야 합니다.

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

Ganesh

FormsModule 을 가져와야 합니다.

app.module.ts를 열고 행을 추가하십시오.

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

그리고

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

Tharindu Lakshan

ngModel은 FormsModule의 일부입니다. 그리고 ngModel과 함께 작동하려면 @angular/forms에서 가져와야 합니다.

app.module.ts를 다음과 같이 변경하십시오.

 import { FormsModule } from '@angular/forms'; [...] @NgModule({ imports: [ [...] FormsModule ], [...] })

Anand Raja

저는 Angular 7을 사용하고 있습니다.

FormBuilder 클래스를 사용하여 반응형 양식을 생성하기 때문에 ReactiveFormsModule을 가져와야 합니다.

 import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @NgModule({ imports: [ CommonModule, FormsModule, ReactiveFormsModule ], declarations: []})

Ved_Code_it

이 구성 요소는 루트 즉 app.module.ts에있는 경우 루트 모듈에서 수입 FormsModule 필요

app.module.ts를 열어주세요.

@angular/forms 에서 FormsModule 가져오기

전:

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

그리고

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

WapShivam

앱 모듈에서 FormsModule 을 가져옵니다.

그것은 당신의 응용 프로그램이 잘 실행되도록 할 것입니다.

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import {ContactListCopmponent} from './contacts/contact-list.component'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent,ContactListCopmponent ], bootstrap: [ AppComponent ] }) export class AppModule { }

Shashikant Pandit

[(ngModel)] 먼저 사용해야 하는 경우 FormsModule 에서 app.module.ts 을 가져온 다음 가져오기 목록에 추가해야 합니다. 이 같은:

파일 app.module.ts

1. import {FormsModule} from "@angular/forms"; 가져오기 {FormsModule} 가져오기;
2. 가져 imports: [ BrowserModule, FormsModule ],

파일 app.component.ts

1. 예: <input type="text" [(ngModel)]="name" >
2. 그리고 <h1>your name is: {{name}} </h1>

iGhost

저는 Angular 5를 사용하고 있습니다.

제 경우에는 ReactiveFormsModule도 가져와야 했습니다.

파일 app.module.ts (또는 anymodule.module.ts ):

 import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @NgModule({ imports: [ CommonModule, FormsModule, ReactiveFormsModule ],

renatohlf

허용된 솔루션을 적용한 후에도 여전히 오류가 발생하는 경우 입력 태그에서 ngModel 속성을 사용하려는 구성 요소에 대해 별도의 모듈 파일이 있기 때문일 수 있습니다. 이 경우 구성 요소의 module.ts 파일에도 허용된 솔루션을 적용합니다.

Subham Pasari

이 질문이 Angular 2에 관한 것임을 알고 있지만 Angular 4를 사용 중이며 이러한 답변 중 어느 것도 도움이 되지 않았습니다.

Angular 4에서 구문은 다음과 같아야 합니다.

 [(ngModel)]

Matt

FormsModule을 올바르게 가져온 후에도 여전히 오류가 발생하면 프로젝트가 컴파일되지 않고(무엇이든 될 수 있는 다른 오류로 인해) 솔루션이 브라우저에 반영되지 않았기 때문에 터미널이나 (Windows 콘솔)을 확인하십시오!

제 경우에는 콘솔에 다음과 같은 관련 없는 오류가 있었습니다.

'ApiService' 유형에 'retrieveGithubUser' 속성이 없습니다.

mruanova

파일 app.module로 가져 오기 FormModule

 import { FormsModule } from '@angular/forms'; [...] @NgModule({ imports: [ [...] FormsModule ], [...] })

vaibhavkhot

ngModel 을 사용하려는 모듈에서 FormsModule을 가져와야 합니다.

 import { FormsModule } from '@angular/forms'; @NgModule({ imports: [ FormsModule, ], }) export class AbcModule { }

Malindu Sandaruwan

에서 ngModule 당신은 수입에 필요한 FormsModule 때문에, ngModel 오고있다 FormsModule . 내가 공유 한 아래 코드와 같이 app.module.ts를 수정하십시오.

 import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ declarations: [ AppComponent, HomeComponent ], imports: [ BrowserModule, AppRoutingModule, FormsModule ], bootstrap: [AppComponent] }) export class AppModule { }

thevinaychoudhary

ngModel 은 FormsModule에서 제공됩니다. 다음과 같은 오류가 발생할 수 있는 경우가 있습니다.

1. 구성 요소가 선언된 모듈의 가져오기 배열(ngModel이 사용되는 구성 요소)로 FormsModule을 가져오지 않았습니다.
2. FormsModule을 다른 모듈에서 상속된 하나의 모듈로 가져왔습니다. 이 경우 두 가지 옵션이 있습니다.

• FormsModule을 두 모듈(module1 및 module2)에서 가져오기 배열로 가져옵니다. 원칙적으로: 모듈을 가져오는 것은 가져온 모듈에 대한 액세스를 제공 하지 않습니다. (가져오기는 상속되지 않음)

  

• Model2에서도 볼 수 있도록 FormsModule을 module1의 가져오기 및 내보내기 배열에 선언합니다.

  

3. (일부 버전에서는 이 문제에 직면했습니다.) FormsModule을 올바르게 가져왔지만 문제는 입력 HTML 태그에 있습니다. 입력에 대한 이름 태그 속성을 추가해야 하며 [(ngModel)]의 개체 바인딩 이름은 name 속성의 이름과 동일해야 합니다.

   

Rzv Razvan

ngModel 은 FormsModule의 일부이기 때문에 @angular/forms에서 가져와야 합니다. 따라서 다음과 같이 app.module.ts를 변경하는 것이 좋습니다.

 import { FormsModule } from '@angular/forms'; [...] @NgModule({ imports: [ [...] FormsModule ], [...] })

Chris

내 시나리오에서는 [CommonModule]과 [FormsModule]을 모두 내 모듈로 가져와야 했습니다.

 import { NgModule } from '@angular/core' import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { MyComponent } from './mycomponent' @NgModule({ imports: [ CommonModule, FormsModule ], declarations: [ MyComponent ] }) export class MyModule { }

Mina Matta

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

William Pourmajidi

FormsModule을 가져와야 합니다.

 #Open app.module.ts #add the lines import { FormsModule } from '@angular/forms'; and @NgModule({ imports: [ FormsModule <--------add this ], }) if you are using reactive form then also added ReactiveFormsModule

Naeem Bashir

다른 모듈에서 공유되지 않은 모듈의 구성 요소를 사용하려고 할 때 이 오류가 발생하는 경우가 있습니다.

예를 들어, module1.componentA.component.ts 및 module2.componentC.component.ts가 있는 2개의 모듈이 있고 module2 내부 템플릿에서 module1.componentA.component.ts의 선택기를 사용하려고 합니다(예: <module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2"> @Input() someInputVariableInModule1 이 있더라도 someInputVariableInModule1을 module1.componentA.component.ts 내에서 사용할 수 없다는 오류가 발생합니다.

이 경우 다른 모듈에서 액세스할 수 있도록 module1.componentA를 공유하려고 합니다. 따라서 sharedModule 내에서 module1.componentA를 공유하는 경우 module1.componentA는 다른 모듈 내에서(module1 외부) 사용할 수 있으며 sharedModule을 가져오는 모든 모듈은 @Input() 선언된 변수.

Guntram

이것은 Type Script 대신 일반 JavaScript를 사용하는 사람들을 위한 것입니다. 아래와 같이 페이지 상단에 있는 양식 스크립트 파일을 참조하는 것 외에도:

 <script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>

ng.forms.FormsModule 을 로드하도록 모듈 로더에 알려야 합니다. 변경 후 NgModule imports 속성은 다음과 같습니다.

imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],

James Poulose

RC1에서 RC5로 업그레이드했는데 이 오류가 발생했습니다.

나는 (새로운 도입 내 마이그레이션을 완료 app.module.ts 변경, 파일을 package.json 내 변경 마침내 새 버전 누락 모듈 및 포함 main.ts 에 기초 따라 부팅, 빠른 시작 예제 Angular2을 ).

npm update 를 수행한 다음 설치된 버전이 올바른지 확인하기 위해 npm outdated

나는 node_modules 폴더를 npm install 다시 설치했습니다 - Voila! 문제 해결됨.

Rots

출처 : http:www.stackoverflow.com/questions/38892771/cant-bind-to-ngmodel-since-it-isnt-a-known-property-of-input