Bonjour, j'ai implémenté un composant date


component:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
    import { Component, HostListener, AfterViewInit, OnInit, Output, EventEmitter, Input, ElementRef, forwardRef, ViewChild } from '@angular/core';
    import { FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
    declare var $: any;
 
    @Component({
      selector: 'date',
      templateUrl: './date.component.html',
      styleUrls: ['./date.component.scss'],
      providers: [
      { 
        provide: NG_VALUE_ACCESSOR,
        multi: true,
        useExisting: forwardRef(() => DateComponent),
      }
    ]
    })
    export class DateComponent  implements AfterViewInit,  ControlValueAccessor {
 
      public dateConstructionMessage = '';
      public innersize: number = window.innerWidth;
      public showHelpMessage = false;
      public formControlNameDate;
      //The internal data model for form control value access
      private innerValue: any = '';
 
      @Input() nameDate: string;
      @Input() patternDate: string;
      @Input() maskDate: string;
      //@Input() c:FormControl = new FormControl(); 
 
      @Output() selectCallBack = new EventEmitter<any>();
      @Output() closeCallBack = new EventEmitter<any>();
      @Output() sendLog = new EventEmitter<any>();
      @Output() focusDateField = new EventEmitter<any>();
      @Output() sendFormControlValue = new EventEmitter<any>();
html:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
    <table>
        <tr>
            <td>
                <input style="width: 100%;" class="form-control" id="datepicker" type="text" (focus)="focusFunction()" placeholder="{{nameDate}}" title="{{nameDate}}" pattern="[0-9]{2}\/[0-9]{2}\/[0-9]{4}" mask="00/00/0000" (keyup)="onKeyUp($event)" #input (blur)="onChange($event, input.value)">
            </td>
            <td style="position : relative">
                <img id="help1" src="./../../assets/images/help.png" alt="Help" (mouseover)="showHelpMessage=true" (mouseout)="showHelpMessage=false" title="Format de date : dd/mm/aaaa,  exemple : 22/03/1980"> 
                <div *ngIf="showHelpMessage" style="position: absolute; top: -54px;left: -140px; width: 230px; background-color: #ECB605;padding: 5px 5px; border-radius: 6px;">
                    Format de date : dd/mm/aaaa,  exemple : 22/03/1980
                </div>
            </td>
        </tr>
    </table>
Ce composant est inclus dans le module CoreModule
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    @NgModule({
      declarations: [
    	DateComponent,
    	SimpleDialogComponent,
    	DragDropDirective,
    	DigitOnlyDirective,
    	MultiplyCharacterPipe
      ],
      imports: [
    	BrowserModule,
    	MatDialogModule,
    	MatToolbarModule,
    	MatCardModule,
    	MatButtonModule
    	],
    exports: [DateComponent],
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA,
        NO_ERRORS_SCHEMA
      ]
    })
    export class CoreModule { }
Le module coreModule est inclus dans le module AppModule.
J'utilise un module chargé de manière paresseuse : ProduitImmobilierRoutingModule
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
    const routes: Routes = [
      {
        path: '',
        redirectTo: '/homePage',
        pathMatch: 'full'
      },
      {
        path: 'homePage',
        component: HomePageComponent
      },
      {
        path: 'produitImmobilier',
        loadChildren: () => import('./produit-immobilier/produit-immobilier-routing.module').then(module => module.ProduitImmobilierRoutingModule)
      },
Et plus loin:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
    const routes: Routes = [
    	  {
        path: '',
        redirectTo: 'addProduitImmobilier',
        pathMatch: 'full'
      },
      {
        path: 'addProduitImmobilier',
        component: AddProduitImmobilierComponent
      }
    ];
 
    @NgModule({
      imports: [
    	ProduitImmobilierModule,
    	RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
    export class ProduitImmobilierRoutingModule { }
 
 
ET
 
 
@NgModule({
  declarations: [
	AddProduitImmobilierComponent,
	CropperDialogComponent],
  imports: [
    BrowserModule,
	ReactiveFormsModule,
	MatAutocompleteModule,
	MatFormFieldModule
  ]
})
export class ProduitImmobilierModule { }
et quand j'essaye de charger la page localhost:4200/produitImmobilier/addProduitImmobilier, j'ai l'erreur suivante
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'nameDate' since it isn't a known property of 'date'. ("onKeyUpCallback($event)" (focusDateField)="focusFunction($event)" (blur)="checkValidityFirstTab();" [ERROR ->][nameDate]="'Date de construction'" c="{{dialogFormGroup.get(['dateConstruction']).value}}" [maskDat"): ng:///ProduitImmobilierModule/AddProduitImmobilierComponent.html@179:264
Can't bind to 'c' since it isn't a known property of 'date'. ("eld)="focusFunction($event)" (blur)="checkValidityFirstTab();" [nameDate]="'Date de construction'" [ERROR ->]c="{{dialogFormGroup.get(['dateConstruction']).value}}" [maskDate]="'00/00/0000'" [patternDate]="'[0-"): ng:///ProduitImmobilierModule/AddProduitImmobilierComponent.html@179:301
Can't bind to 'maskDate' since it isn't a known property of 'date'. ("ab();" [nameDate]="'Date de construction'" c="{{dialogFormGroup.get(['dateConstruction']).value}}" [ERROR ->][maskDate]="'00/00/0000'" [patternDate]="'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'" formControlName="dateConstru"): ng:///ProduitImmobilierModule/AddProduitImmobilierComponent.html@179:357
Can't bind to 'patternDate' since it isn't a known property of 'date'. ("e construction'" c="{{dialogFormGroup.get(['dateConstruction']).value}}" [maskDate]="'00/00/0000'" [ERROR ->][patternDate]="'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'" formControlName="dateConstruction" (sendFormControlVal"): ng:///ProduitImmobilierModule/AddProduitImmobilierComponent.html@179:383
'date' is not a known element:
1. If 'date' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
</td>
<td style="width:22.5%">
[ERROR ->]<date (selectCallBack)="onSelectDateConstructionDatePickerCallBack($event)" (closeCallBack)="onCloseD"): ng:///ProduitImmobilierModule/AddProduitImmobilierComponent.html@179:9
Can't bind to 'nameDate' since it isn't a known property of 'date'. ("onKeyUpCallback($event)" (focusDateField)="focusFunction($event)" (blur)="checkValidityFirstTab();" [ERROR ->][nameDate]="'Date de construction'" [maskDate]="'00/00/0000'" [patternDate]="'[0-9]{2}\/[0-9]{2}\/[0"): ng:///ProduitImmobilierModule/AddProduitImmobilierComponent.html@265:270
Can't bind to 'maskDate' since it isn't a known property of 'date'. ("eld)="focusFunction($event)" (blur)="checkValidityFirstTab();" [nameDate]="'Date de construction'" [ERROR ->][maskDate]="'00/00/0000'" [patternDate]="'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'" formControlName="dateConstru"): ng:///ProduitImmobilierModule/AddProduitImmobilierComponent.html@265:307
Can't bind to 'patternDate' since it isn't a known property of 'date'. (")" (blur)="checkValidityFirstTab();" [nameDate]="'Date de construction'" [maskDate]="'00/00/0000'" [ERROR ->][patternDate]="'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'" formControlName="dateConstruction" (sendFormControlVal"): ng:///ProduitImmobilierModule/AddProduitImmobilierComponent.html@265:333
'date' is not a known element:
1. If 'date' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<tr>
<td style="width:40%">
[ERROR ->]<date date1 (selectCallBack)="onSelectDateConstructionDatePickerCallBack($event)" (closeCallBack)="on"): ng:///ProduitImmobilierModule/AddProduitImmobilierComponent.html@265:9
La partie html où se produit l'erreur est la suivante

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
<td style="width:22.5%">
    <date (selectCallBack)="onSelectDateConstructionDatePickerCallBack($event)" (closeCallBack)="onCloseDateConstructionDatePickerCallBack($event)" (sendLog)="onKeyUpCallback($event)" (focusDateField)="focusFunction($event)" (blur)="checkValidityFirstTab();" [nameDate]="'Date de construction'"  c="{{dialogFormGroup.get(['dateConstruction']).value}}" [maskDate]="'00/00/0000'" [patternDate]="'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'" formControlName="dateConstruction" (sendFormControlValue)="updateDateConstructionValue($event)"></date>
</td>