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

제 컴포넌트에서 [(ngModel)] 을 사용하는 간단한 입력이 있습니다:

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

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

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

여기 컴포넌트.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;
}

답변 1

네, 그게 맞아요. app.module.ts 파일에서, 단지 다음을 추가했어요:

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

답변 2

제목: 'input' 요소의 'ngModel' 속성에 바인딩할 수 없습니다. 'ngModel'은 알려진 속성이 아닙니다.
본문:
'ngModel'은 Angular 프레임워크에서 제공하는 중요한 디렉티브 중 하나입니다. 이 디렉티브는 양방향 데이터 바인딩을 구현하는 데 사용됩니다. 하지만 'ngModel'을 사용하려는 'input' 요소에 바인딩할 수 없다는 오류 메시지가 발생할 수 있습니다.
이 오류 메시지는 'input' 요소에 'ngModel'이라는 속성을 사용하려고 할 때 자주 발생하는데, 이는 해당 요소의 속성으로 'ngModel'이 정의되지 않은 경우입니다. 이 오류는 주로 Angular 프레임워크가 'FormsModule' 모듈을 로드하지 않은 상태에서 발생할 수 있습니다. 'ngModel'을 사용하기 위해서는 'FormsModule' 모듈을 프로젝트에 명시적으로 추가해야 합니다.
이 오류를 해결하기 위해서는 다음 단계를 따르면 됩니다.
1. 프로젝트에 'FormsModule' 모듈이 설치되어 있는지 확인합니다. 만약 없다면, 'npm install @angular/forms' 명령을 사용하여 설치합니다.
2. 'app.module.ts'나 해당 모듈 파일에서 'FormsModule'를 import 문을 통해 로드합니다.
3. 'imports' 배열에 'FormsModule'를 추가합니다.
위의 단계를 수행하면 'ngModel'을 사용하여 'input' 요소에 바인딩할 수 있게 됩니다. 'ngModel'은 Angular 프레임워크의 강력한 데이터 바인딩 기능을 활용하여 사용자 입력 데이터를 컴포넌트의 속성과 동기화할 수 있습니다. 이를 통해 사용자와의 상호작용을 수월하게 처리하고, 애플리케이션의 사용성을 향상시킬 수 있습니다.
따라서, 'input' 요소의 'ngModel'에 바인딩할 수 없다는 오류 메시지는 'FormsModule' 모듈을 로드하지 않아 발생하는 것이며, 해당 모듈을 프로젝트에 추가하여 오류를 해결할 수 있습니다. Angular 프레임워크의 'ngModel'을 사용하면 사용자의 입력 상태를 관리하고 데이터를 신속하게 업데이트할 수 있으므로, Angular 프로젝트를 개발하는 데 활용할 가치가 있습니다.