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

구성 요소가 표시되지 않더라도 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
  ],
  [...]
})

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

사용의 경우 [(ngModel)]에 각도 2 , 4 및 5 + , 당신은 수입에 필요한 FormsModule 코너 양식에서 ...

또한 그것은의 형태에서이 경로에 각도의 repo 에서 GitHub의 :

각도 / 패키지 / 양식 / 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:
 * E.g.:
 * ```
 * <div>{{myModel.valid}}</div>
 * <input [(ngModel)]="myValue" #myModel="ngModel">
 * ```
 * I.e. `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 을 참조 하십시오.

FormsModule을 가져와야합니다.

app.module.ts를 엽니 다.

그리고 라인을 추가

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

과

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

이것을 던지면 누군가를 도울 수 있습니다.

AuthModule인증 요구 사항을 처리하기 위해 새로운 NgModule을 만들었다 고 가정하면 FormsModule해당 AuthModule 도 가져와야 합니다.

에서 FormsModuleONLY를 사용하는 AuthModule경우 FormModuleIN을 기본값으로 가져올 필요가 없습니다.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 { }

그런 다음 다른 곳을 AppModule사용하지 않으면 가져 오기를 잊어 버리십시오 FormsModule.

간단한 Soultion : 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 { }

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

이 오류를 제거하기 위해 따라야하는 두 가지 단계가 있습니다.

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

그것이 도움이되기를 바랍니다.

이 컴포넌트가 루트에있는 경우 루트 모듈 에서 FormsModule 을 가져와야 합니다 (예 : app.module.ts).

app.module.ts를 친절하게여십시오

@ angular / forms 에서 FormsModule 가져 오기

전의:

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

과

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

Angular 7을 사용하고 있습니다

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

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

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

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

[(ngModel)]먼저 사용해야하는 경우 다음 을 가져와야합니다 FormsModule.app.module.ts 다음 수입 목록에 추가 할 수 있습니다. 이 같은:

app.module.ts

1. 수입 import {FormsModule} from "@angular/forms";
2. 수입에 추가 imports: [ BrowserModule, FormsModule ],

app.component.ts

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

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

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

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

[...]

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

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

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

필자의 경우 RactiveFormsModule도 가져와야했습니다.

app.module.ts (또는 anymodule.module.ts)

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],

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

Angular 4에서 구문은

[(ngModel)]

도움이 되었기를 바랍니다.

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

필자의 경우 콘솔에 관련이없는 오류가 발생했습니다. 'AtriService'유형에 'retrieveGithubUser'특성이 없습니다.

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

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

ngModel 은 FormsModule 에서 제공됩니다. 이러한 종류의 오류가 발생할 수있는 경우가 있습니다.

1. 컴포넌트가 선언 된 모듈의 가져 오기 배열 (ngModel이 사용되는 컴포넌트)로 FormsModule을 가져 오지 않았습니다.
2. FormsModule을 다른 모듈에서 상속 된 한 모듈로 가져 왔습니다. 이 경우 두 가지 옵션이 있습니다.
   • FormsModule을 모듈 1과 모듈 2에서 가져 오기 배열로 가져 오십시오. 일반적으로 모듈을 가져 오면 가져 오기 된 모듈에 액세스 할 수 없습니다 (가져 오기는 상속되지 않음).

• model2에서도 볼 수 있도록 FormsModule을 module1의 가져 오기 및 내보내기 배열로 선언하십시오.

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

   

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

app.module을 FormModule 가져 오기

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

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

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

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

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

시나리오에서는 [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 { }

FormsModule을 가져와야합니다.

열다 app.module.ts를다.

그리고 라인을 추가

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

과

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

우리가 이미 가져온 경우 때때로 BrowserModule, FormsModule나는 같은 오류를 가지고 있지만 다른 관련 모듈 그때 깨달았 우리가 주문에 가져올 필요가 , 내 경우에는 나는 그것을 놓쳤다. 순서가 같아야 그래서 BrowserModule, FormsModule, ReactiveFormsModule.

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

희망이 누군가에게 도움이 .. :)

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

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

또한 모듈 로더에을로드하도록 지시해야합니다 ng.forms.FormsModule. 변경 후 메소드의 내 imports속성은 NgModule다음과 같습니다.

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

행복한 코딩!

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

Angular2 빠른 시작 예제를 기반으로 마이그레이션을 완료했습니다 (새 app.module.ts파일 소개, 새 package.json버전 및 누락 된 모듈 포함으로 변경 및 마지막 main.ts으로 부팅하도록 변경). ).

나는 npm update한 다음npm outdated 설치되어있는 버전이 여전히 운이 정확하지 않습니다 확인합니다.

node_modules폴더를 완전히 npm install지우고-Voila로 다시 설치했습니다 ! 문제 해결됨.

처음 튜토리얼을했을 때 main.ts는 현재와 약간 다르게 보였습니다. 매우 비슷해 보이지만 차이점에주의하십시오 (상단이 정확함).

옳은:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

이전 튜토리얼 코드 :

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

app.module.ts에 코드를 추가하십시오.

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

[...]

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