Proriétés @input d'un composant non reconnues dans un contexte de chargement

**flamant** · 25/12/2020, 14h06

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>

**flamant** · 26/12/2020, 17h16

Finalement, j'ai résolu mon problème

Voici AppModule

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
 
    @NgModule({
      declarations: [
        AppComponent,
        HomePageComponent,
        HeaderComponent,
      ],
      imports: [
        BrowserAnimationsModule,
        AppRoutingModule,
        ReactiveFormsModule,
        HttpClientModule,
        NgxMaskModule.forRoot(),
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule {

Voici le module Shared1Module

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
 
    @NgModule({
      declarations: [
    	DateComponent,
    	SimpleDialogComponent,
    	DragDropDirective,
    	DigitOnlyDirective,
    	MultiplyCharacterPipe
      ],
      imports: [
    	CommonModule,
    	MatDialogModule,
    	MatInputModule
    	],
    	exports: [
    	DateComponent,
    	SimpleDialogComponent,
    	DragDropDirective,
    	DigitOnlyDirective,
    	MultiplyCharacterPipe,
    	CommonModule,
    	MatDialogModule,
    	MatInputModule
    		],
        schemas: [
            CUSTOM_ELEMENTS_SCHEMA,
            NO_ERRORS_SCHEMA
          ]
    })
    export class Shared1Module { }

Voici le module AppRoutingModule

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
 
    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)
      },
      {
        path: 'account',
        loadChildren: () => import('./user-account/user-account-routing.module').then(module => module.UserAccountRoutingModule)
      }
      ];
 
 
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

Voici le module 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
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
    const routes: Routes = [
      {
        path: '',
        redirectTo: 'list',
        pathMatch: 'full'
      },
      {
        path: 'add',
        component: AddProduitImmobilierComponent
      },
      {
        path: 'list',
        component: ListProduitImmobilierComponent
      },
      {
        path: 'details/:id',
        component: ProduitImmobilierDetailsComponent
      },
      { path: '**', component: ListProduitImmobilierComponent }  
    ];
 
    @NgModule({
      imports: [
    	ProduitImmobilierModule,
    	RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
    export class ProduitImmobilierRoutingModule { }

Voici le module ProduitImmobilierModule

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
 
    @NgModule({
      declarations: [
    	AddProduitImmobilierComponent,
    	CropperDialogComponent,
    	ListProduitImmobilierComponent,
    	ProductLightComponent,
    	ProduitImmobilierDetailsComponent,
    	UserCardComponent],
 
      imports: [
    	Shared1Module,
    	ReactiveFormsModule,
    	MatAutocompleteModule,
    	MatFormFieldModule,
    	ImageCropperModule,
    	MDBBootstrapModule.forRoot(),
        AgmCoreModule.forRoot({
          apiKey: 'AIzaSyA3nptWFYQVNZFsBws0egtBoEzbv-Qye_Q'
        })
      ],
      entryComponents: [CropperDialogComponent]
    })
    export class ProduitImmobilierModule { }

Proriétés @input d'un composant non reconnues dans un contexte de chargement

Angular

Discussions similaires

Partager

Partager