각도 오류: "ngModel은 'input'의 기존 속성이 아니므로 바인딩할 수 없습니다."

각도 오류: "ngModel은 'input'의 기존 속성이 아니므로 바인딩할 수 없습니다."

이 질문의 답변은 지역사회의 노력입니다.기존 답변을 편집하여 이 게시물을 개선하십시오.현재 새로운 답변이나 상호작용을 받아들이지 않고 있습니다.

Angular 4를 사용하고 있는데 콘솔에 다음 오류가 나타납니다.

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

어떻게 하면 해결할 수 있을까요?

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

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

@NgModule({
    imports: [
         FormsModule      
    ]

---

편집

같은 문제가 중복되는 질문이 많기 때문에 이 답변을 보강합니다.

두 가지 이유가 있을 수 있습니다.

• Missing 이므로 모듈에 추가합니다.

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

• 의 구문/철자를 확인합니다.[(ngModel)]입력 태그에

이게 정답이에요.'FormsModule'을 가져와야 합니다.

app.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 2위

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();
  }));

잘 부탁드립니다.

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

앱 전체에서 사용할 권한이 있음을 에 알려야 합니다. -> ->에 를 추가하여 사용할 수 있습니다.

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

@NgModule({

   imports: [ FormsModule ],       // HERE

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

이 문제에 대한 위의 해결 방법은 모두 정답입니다.하지만 느린 부하를 사용하고 있다면,FormsModule폼이 있는 자모듈로 Import해야 합니다.에 추가app.module.ts도움이 안 돼요

카르마/재스민으로 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],
})

이 문제에 대해 몇 시간 동안 고민한 끝에 해결 방법을 찾았습니다.

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

더하다FormsModule당신의 안에서NgModuleImports(개요)ngModel의 일부입니다.FormsModule).

주의:AppModule또는 느린 로딩으로 인해 피처 모듈이 느릿느릿 로드됩니다.

imports: [
   ...,
   FormsModule,
   ...
]

내 대답은 의 철자가 틀렸다.ngModel이렇게 써놨어요.ngModule그래야 할 때ngModel.

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

위에서 말한 모든 것을 시도해 보았지만, 아직 효과가 없습니다.

결국 Angular 사이트에서 문제를 발견했습니다.module.ts로 formModule Import를 시도합니다.

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

html에서는 ngModel을 이렇게 불러야 합니다.입력 요소의 다른 속성에 종속되지 않습니다.

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

이 Forms Module 로 Import 있는지 합니다.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까지 검증됩니다.

추가해 보다

모듈 레벨의 ngModel

코드는 위와 같습니다.

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

독립 모듈에 있는 경우 다음 모듈을 추가합니다.

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
  ...
})

케이스를 증명하기 위한 간단한 데모입니다.

Import를 은 Import입니다.그건ReactiveFormsModule.

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

다음 행에 추가합니다.

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

[...]

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

철자를 틀렸을 경우 ngModel이 아닌 ngModel로 참조하고 있었습니다. :) 도움이 되길 바랍니다!

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

폼 모듈을 app.ts.로 Import합니다.

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">

각도 7에서는 "Reactive Forms Module"을 가져와야 합니다.

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

저는 이 수입으로 이 문제를 해결했습니다.도움이 될 거야

먼저 FormsModule을 Import한 후 컴포넌트에 ngModel을 사용합니다.

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

HTML 코드:

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

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

제 경우, 애플리케이션의 느린 로딩 변환 중에 잘못 Import했습니다.RoutingModule의 내 ComponentModule에 inside inside inside app-routing.module.ts

언급URL : https://stackoverflow.com/questions/43298011/angular-error-cant-bind-to-ngmodel-since-it-isnt-a-known-property-of-inpu