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

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

컴포넌트에 .[(ngModel)]:

<input type="text" [(ngModel)]="test" placeholder="foo" />

그리고 앱 실행 시 컴포넌트가 표시되지 않아도 다음과 같은 오류가 발생합니다.

zone.js:461 처리되지 않은 약속 거부:템플릿 구문 분석 오류: 'ngModel'은 'input'의 알려진 속성이 아니므로 바인딩할 수 없습니다.

component.ts는 다음과 같습니다.

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 2 공식 튜토리얼과 폼의 공식 설명서를 참조하십시오.

「 」를 사용하는 [(ngModel)]Angular 2, 4, 5+에서는 Angular 형식에서 Forms Module을 Import해야 합니다.

또한 GitHub의 Angular 저장소의 폼 아래에 있습니다.

angular / packages / forms / src / directives / ng_modelts

아마 앵귤러에게는 별로 달갑지 않은 일일 거야JS 개발자는 ng-model을 언제 어디서나 사용할 수 있었지만, Angular는 그 당시에 사용하고 싶은 것을 사용하기 위해 모듈을 분리하려고 하기 때문에 ngModel은 현재 FormsModule에 있습니다.

또한 Reactive Forms Module을 사용하는 경우 Import도 필요합니다.

따라서 단순히 app.module.ts를 찾고 다음 웹 사이트에서FormsModuleImport......

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의 현재 입니다.ngModelForms Module:

/**
 * `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을 참조하십시오.

Forms Module을 Import해야 합니다.

app.module.ts를 열고 행을 추가합니다.

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

그리고.

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

ngModel은 Forms Module의 일부입니다.또한 @angular/forms에서 가져와 ngModel과 연동해야 합니다.

app.module.ts를 다음과 같이 변경해 주세요.

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

[...]

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

NgModule을하면 "NgModule"이라고 합니다.AuthModule으로, Import를 실시해 .FormsModule그 Auth Module에도 있습니다.

★★★★★★★★★★★★★★★★★★★★를 사용해 주세요FormsModule 에만AuthModule Import를 하지 않아도 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 { }

「 Import 」에서 하는 .AppModuleFormsModule어디든지.

를 Import해야 합니다.FormsModule.

app.module.ts를 열고 행을 추가합니다.

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

그리고.

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

심플한 솔루션:app.module.ts 파일에서 -

예 1

import {FormsModule} from "@angular/forms";
// Add in imports

imports: [
 BrowserModule,
 FormsModule
 ],

예 2

[(ngModel)]를 사용하려면 FormsModule을 app.module.ts로 Import해야 합니다.

import { FormsModule  } from "@angular/forms";
@NgModule({
  declarations: [
    AppComponent, videoComponent, tagDirective,
  ],
  imports: [
    BrowserModule,  FormsModule

  ],
  providers: [ApiServices],
  bootstrap: [AppComponent]
})
export class AppModule { }

[(ngModel)]를 사용하는 모듈에서 FormsModule을 Import합니다.

이 에러를 해소하려면 , 다음의 2개의 순서를 실행할 필요가 있습니다.

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

기본적으로 파일 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 { }

이긴 하지만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 {}

Angular 7을 쓰고 있어요.

FormBuilder 클래스를 사용하여 반응형 양식을 만들기 때문에 반응형 양식 모듈을 가져와야 합니다.

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

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

이 컴포넌트가 루트(app.module.ts 등)에 있는 경우 루트 모듈에 Forms Module을 Import해야 합니다.

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

@angular/forms에서 Forms Module 가져오기

예:

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

그리고.

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

앱 모듈에서 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)]'가져오기'가 요.FormsModuleapp.module.ts수입품 목록을 추가합니다.다음과 같이 합니다.

파일 app.module.ts

1. import 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>

앵글5를 쓰고 있어요.

제 경우 Reactive Forms Module도 Import해야 했습니다.

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

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

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

승인된 솔루션을 적용한 후에도 오류가 계속 발생하는 경우 입력 태그에 ngModel 속성을 사용하는 컴포넌트의 모듈파일이 따로 있기 때문일 수 있습니다.이 경우 컴포넌트의 module.ts 파일에도 승인된 솔루션을 적용합니다.

Angular 2에 관한 질문인 건 알지만, Angular 4에 접속 중이고, 이 답변들 중 어느 것도 도움이 되지 않습니다.

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

[(ngModel)]

Forms Module을 올바르게 Import한 후에도 오류가 발생할 경우 터미널 또는 (Windows 콘솔)에 체크인을 하십시오.프로젝트가 컴파일되지 않고(다른 오류가 있을 수 있음) 솔루션이 브라우저에 반영되지 않았기 때문입니다.

내 경우 콘솔에 다음과 같은 관련 없는 오류가 발생했습니다.

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

app.module 파일의 FormModule을 Import합니다.

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

모듈에서 ngModel을 사용하려면 FormsModule을 Import해야 합니다.

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

ngModel은 FormsModule에서 가져옵니다.다음과 같은 오류가 발생할 수 있습니다.

1. 컴포넌트가 선언된 모듈의 Import 배열(ngModel이 사용되는 컴포넌트)에 FormsModule을 Import하지 않았습니다.
2. FormsModule을 다른 모듈에서 상속된 모듈로 Import해야 합니다.이 경우 다음 두 가지 옵션이 있습니다.

• Forms Module을 module1과 module2의 양쪽 모듈에서 Import 배열로 Import합니다.원칙: 모듈을 Import해도 Import된 모듈에 액세스할 수 없습니다(Import는 상속되지 않습니다).

  

• module1의 Import 및 Export 배열에 FormsModule을 선언하여 module2에서도 표시할 수 있도록 합니다.

  

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

   

»ngModuleImport를 .FormsModule, 냐냐ngModel~에서 오다FormsModuleapp.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 { }

Forms Module을 app.module.ts로 Import하여 행을 추가해야 합니다.

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

FormsModule에 선언된 ngModel 지시어를 사용하면 템플릿 기반 양식의 컨트롤을 데이터 모델의 속성에 바인딩할 수 있습니다.양방향 데이터 바인딩 구문인 [(ngModel)]을 사용하여 지시문을 포함하면 Angular는 컨트롤의 값과 사용자 상호 작용을 추적하고 보기를 모델과 동기화된 상태로 유지할 수 있습니다.

시나리오에서는 [Common Module]와 [Forms Module]를 모두 모듈로 Import해야 했습니다.

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

ng모델은 Forms Module의 일부이므로 @angular/forms에서 Import해야 합니다.따라서 다음과 같이 app.module.ts를 변경할 것을 권장합니다.

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

[...]

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

Forms Module을 Import해야 합니다.

#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

공유되지 않은 모듈의 컴포넌트를 다른 모듈에서 사용하려고 할 때 이 오류가 발생할 수 있습니다.

예를 들어 module1.componentA.ts와 module2.componentC.component.ts의 2개의 모듈이 있고 module2 내의 템플릿에서 module1.componentA.ts의 셀렉터를 사용하려고 합니다(예:<module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2">)는, 일부의 에러를 발생시킵니다.inputVariableInModule1은 module1.componentA.component.ts 내부에서는 사용할 수 없습니다.이 경우,@Input() someInputVariableInModule1모듈1.componentA에 있습니다.

이 경우 module1.componentA를 공유하여 다른 모듈에서 액세스할 수 있도록 해야 합니다.따라서 sharedModule 내에서 module1.componentA를 공유하면 module1.componentA는 다른 모듈(module1에서 외부) 내에서 사용할 수 있게 되며 sharedModule을 Import하는 모든 모듈은 템플릿 내의 셀렉터에 액세스 할 수 있게 됩니다.@Input()선언된 변수입니다.

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

이것은 Type Script 대신 일반 JavaScript를 사용하는 사용자를 위한 것입니다.페이지 상단에 있는 폼 스크립트파일을 참조하는 것 외에 다음과 같이 입력합니다.

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

에 " " "를 .ng.forms.FormsModule을 한 imports의 of의 NgModule을 사용하다

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

언급URL : https://stackoverflow.com/questions/38892771/cant-bind-to-ngmodel-since-it-isnt-a-known-property-of-input