Angular 4를 사용하고 있으며 콘솔에서 오류가 발생합니다.
'input'의 알려진 속성이 아니기 때문에 'ngModel'에 바인딩 할 수 없습니다.
이 문제를 어떻게 해결할 수 있습니까?
Angular 4를 사용하고 있으며 콘솔에서 오류가 발생합니다.
'input'의 알려진 속성이 아니기 때문에 'ngModel'에 바인딩 할 수 없습니다.
이 문제를 어떻게 해결할 수 있습니까?
답변:
양식 입력에 양방향 데이터 바인딩을 사용하려면 FormsModule
Angular 모듈에서 패키지 를 가져와야합니다 .
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.ts
imports
[]
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],
})
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
...
})
사례를 증명 하는 간단한 데모 .
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에서 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까지 검증됩니다.
양식 입력에 양방향 데이터 바인딩을 사용하려면 Angular 모듈에서 FormsModule 패키지를 가져와야합니다. 자세한 내용은 여기 Angular 2 공식 자습서 및 양식 공식 문서를 참조하십시오.
app.module.ts에서 아래 줄을 추가하십시오.
import { FormsModule } from '@angular/forms';
[...]
@NgModule({
imports: [
[...]
FormsModule
],
[...]
})
먼저 FormsModule을 가져온 다음 component.ts에서 ngModel을 사용하십시오.
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule
];
HTML 코드 :
<input type='text' [(ngModel)] ="usertext" />
FormsModule
에imports: []
사용하는 모듈ngModel
. 그렇지 않으면 코드를 게시하십시오.