"Impossible de lier 'ngModel' car ce n'est pas une propriété connue du message d'erreur 'p-calendar'" essayant d'utiliser le composant PrimeNG, pourquoi?

Question

Je suis très nouveau dans angulaire 2 \ 4 et je suis en train de suivre ce tutoriel vidéo pour ajouter PrimeNG composants à mon projet angulaire:

https://www.youtube.com/watch?v=6Nvze0dhzkE

et la Get a commencé section de la page tutoriel PrimeNG: https://www.primefaces.org/primeng/#/setup

Voici donc ma app.component.html vue:

<!--The whole content below can be removed with the new code.--> 
<div style="text-align:center"> 
    <h1> 
    Welcome to {{title}}!! 
    </h1> 
</div> 

<p-calendar [(ngModel)]="value"></p-calendar> 

{{value | date:'dd.mm.yyy'}} 

Comme vous pouvez le voir, je l'ai inséré cette balise pour afficher le composant de calendrier:

<p-calendar [(ngModel)]="value"></p-calendar> 

(comme le montre aussi la documentation officielle de ce composant: https://www.primefaces.org/primeng/#/calendar)

Ici, j'ai le premier problème parce que IntelliJ me donne ce message d'erreur:

Error:(9, 13) Angular: Can't bind to 'ngModel' since it isn't a known property of 'p-calendar'. 
1. If 'p-calendar' is an Angular component and it has 'ngModel' input, then verify that it is part of this module. 
2. If 'p-calendar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. 

Je pense qu'il est étrange parce que cette ligne devrait lier la valeur sélectionnée sur la cale ndar par l'utilisateur à la valeur variable de mon modèle.

Après le tutoriel, je l'ai modifié le fichier app.module.ts ainsi:

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 

import { AppComponent } from './app.component'; 
import {CalendarModule} from 'primeng/primeng'; 


@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    CalendarModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

export class MyModel { 
    value: Date; 
} 

Comme vous pouvez le voir ici, j'ai exporté cette classe:

export class MyModel { 
    value: Date; 
} 

ayant la propriété valeur (ayant tapez Date). La propriété doit donc être la propriété de cette ligne dans la vue:

<p-calendar [(ngModel)]="value"></p-calendar> 

Mais il ne peut pas travailler et quand je donne accès à cette application dans la console du navigateur JavaScript J'obtenir ce message d'erreur:

compiler.es5.js:1690 Uncaught Error: Template parse errors: 
Can't bind to 'ngModel' since it isn't a known property of 'p-calendar'. 
1. If 'p-calendar' is an Angular component and it has 'ngModel' input, then verify that it is part of this module. 
2. If 'p-calendar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<p-calendar [ERROR ->][(ngModel)]="value"></p-calendar {{value | date:'dd.mm.yyy'}} 
"): ng:///AppModule/AppComponent.html@8:12 
    at syntaxError (http://localhost:4200/vendor.bundle.js:7283:34) 
    at TemplateParser.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:4200/vendor.bundle.js:18403:19) 
    at JitCompiler.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:32555:39) 
    at http://localhost:4200/vendor.bundle.js:32475:62 
    at Set.forEach (native) 
    at JitCompiler.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:32475:19) 
    at http://localhost:4200/vendor.bundle.js:32362:19 
    at Object.then (http://localhost:4200/vendor.bundle.js:7272:148) 
    at JitCompiler.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:32361:26) 
    at JitCompiler.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:32290:37) 
syntaxError @ compiler.es5.js:1690 
webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.TemplateParser.parse @ compiler.es5.js:12810 
webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate @ compiler.es5.js:26962 
(anonymous) @ compiler.es5.js:26882 
webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler._compileComponents @ compiler.es5.js:26882 
(anonymous) @ compiler.es5.js:26769 
then @ compiler.es5.js:1679 
webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents @ compiler.es5.js:26768 
webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync @ compiler.es5.js:26697 
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4536 
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4522 
./src/main.ts @ main.ts:11 
__webpack_require__ @ bootstrap a55b161…:54 
2 @ main.ts:11 
__webpack_require__ @ bootstrap a55b161…:54 
webpackJsonpCallback @ bootstrap a55b161…:25 
(anonymous) 

Pourquoi? Qu'est-ce qui ne va pas? Qu'est-ce que je rate? Comment puis-je essayer de résoudre ce problème? Il me semble que j'ai suivi le tutoriel ...

Answer 1

Ajouter FormsModule dans votre AppModule:

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

@NgModule({ 
    // ... 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    CalendarModule 
    ], 
    // ... 
}) 
export class AppModule { }