구성 요소가 표시되지 않더라도 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을 가져옵니다.
