Proriétés @input d'un composant non reconnues dans un contexte de chargement
Bonjour, j'ai implémenté un composant date
component:
Code:
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:
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:
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:
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:
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
Citation:
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:
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> |
