Angular 9 Custom input input ne s'affiche pas

Version imprimable

1 pièce(s) jointe(s)

app.module.ts

Code:

1
2
3
4
5
6
 
import { SharedModule } from './services/shared/shared.module';
 
  imports: [
    SharedModule,
  ],

share.module.ts

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 
import { LienEditComponent } from '../../components/editable/lien-edit/lien-edit.component';
import { InputEditComponent } from '../../components/editable/input-edit/input-edit.component';
import { CustomInputComponent } from '../../components/custom-input.component';
 
@NgModule({
  exports: [
    CommonModule, 
    FormsModule,
    ReactiveFormsModule,
    CustomInputComponent
  ],
  declarations: [
    CustomInputComponent
  ],
})
export class SharedModule { }

custom-input.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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
import { Component, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 
const noop = () => {
};
 
export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomInputComponent),
    multi: true
};
 
@Component({
    selector: 'custom-input',
    template: `<div class="form-group">
                    <label><ng-content></ng-content>
                        <input [(ngModel)]="value" class="form-control" (blur)="onBlur()" >
                    </label>
                </div>`,
    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class CustomInputComponent implements ControlValueAccessor {
 
    //The internal data model
    private innerValue: any = '';
 
    //Placeholders for the callbacks which are later provided
    //by the Control Value Accessor
    private onTouchedCallback: () => void = noop;
    private onChangeCallback: (_: any) => void = noop;
 
    //get accessor
    get value(): any {
        return this.innerValue;
    };
 
    //set accessor including call the onchange callback
    set value(v: any) {
        if (v !== this.innerValue) {
            this.innerValue = v;
            this.onChangeCallback(v);
        }
    }
 
    //Set touched on blur
    onBlur() {
        this.onTouchedCallback();
    }
 
    //From ControlValueAccessor interface
    writeValue(value: any) {
        if (value !== this.innerValue) {
            this.innerValue = value;
        }
    }
 
    //From ControlValueAccessor interface
    registerOnChange(fn: any) {
        this.onChangeCallback = fn;
    }
 
    //From ControlValueAccessor interface
    registerOnTouched(fn: any) {
        this.onTouchedCallback = fn;
    }
 
}
 
 
/*
import {Component} from '@angular/core'
 
@Component({
    selector: 'demo-app',
    template: `
        <p><span class="boldspan">Form data:</span>{{demoForm.value | json}}</p>
        <p><span class="boldspan">Model data:</span> {{dataModel}}</p>
        <form #demoForm="ngForm">
          <custom-input name="someValue" 
                          [(ngModel)]="dataModel">
              Write in this wrapper control:
          </custom-input>
        </form>`
})
export class AppComponent {
    dataModel: string = '';
}
 
*/

app.component.html

Code:

1
2
3
4
5
6
 
 <p><span class="boldspan">Form data:</span>{{demoForm.value | json}}</p>
 <p><span class="boldspan">Model data:</span> {{dataModel}}</p>
 <form #demoForm="ngForm">
 <custom-input name="someValue" [(ngModel)]="dataModel"> Write in this wrapper control: </custom-input>
 </form>

list_component.html

Code:

1
2
3
4
5
6
 
<p><span class="boldspan">Form data:</span>{{demoForm.value | json}}</p>
 <p><span class="boldspan">Model data:</span> {{dataModel}}</p>
 <form #demoForm="ngForm">
 <custom-input name="someValue" [(ngModel)]="dataModel" ngDefaultControl> Write in this wrapper control: </custom-input>
 </form>

affichage
Pièce jointe 576874
sur l'image, on voit bien que le custom-input du app.component ( au dessus dans l'ecran) fonctionne
et celui de la list ne s'affiche pas a l'exception des

Code:

1
2
  <p><span class="boldspan">Form data:</span>{{demoForm.value | json}}</p>
        <p><span class="boldspan">Model data:</span> {{dataModel}}</p>

08/08/2020, 15h38
krakatoa

** y'a t'il une erreur dans la console javascript ?

** list-component possede t'il un module ?
08/08/2020, 16h48
yLaplace

non pas d'erreur dans le code, la console ne presente aucune erreur
list-component est un composant , il n'a pas de module
08/08/2020, 17h59
krakatoa

le selector de list-component est ou ? (la balise)

bonsoir,
la selection se fait a partir d'un menu

Code:

1
2
3
<li>
                <a routerLink="/owner/owners">Owner Actions</a>
            </li>

routing

Code:

1
2
3
4
 
const routes: Routes = [
  { path: 'owner', loadChildren: "../modules/application/owner/owner.module#OwnerModule" },
];

OwnerModule

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
 
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { OwnerListComponent } from './owner-list/owner-list.component';
import { OwnerRoutingModule } from './owner-routing/owner-routing.module';
import { MaterialModule } from '../../../material/material.module';
import { OwnerDetailsComponent } from './owner-details/owner-details.component';
import { OwnerDataComponent } from './owner-details/owner-data/owner-data.component';
import { AccountDataComponent } from './owner-details/account-data/account-data.component';
import { ReactiveFormsModule } from '@angular/forms';
import { OwnerCreateComponent } from './owner-create/owner-create.component';
import { OwnerDeleteComponent } from './owner-delete/owner-delete.component';
import { OwnerUpdateComponent } from './owner-update/owner-update.component';
 
@NgModule({
  declarations: [
    OwnerListComponent, 
    OwnerDetailsComponent, 
    OwnerDataComponent, 
    AccountDataComponent, OwnerCreateComponent, OwnerDeleteComponent, OwnerUpdateComponent, 
  ],
  imports: [
    CommonModule,
    OwnerRoutingModule,
    MaterialModule,
    ReactiveFormsModule,
    FormsModule
  ]
})
export class OwnerModule { }

list.component.ts

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
@Component({
  selector: 'app-owner-list',
  templateUrl: './owner-list.component.html',
  styleUrls: ['./owner-list.component.css']
})
 
export class OwnerListComponent implements OnInit, AfterViewInit {
 
  dataModel: string = ''; 
 
 
}

list.component.html

Code:

1
2
3
4
5
6
 
 <p><span class="boldspan">Form data:</span>{{demoForm.value | json}}</p>
 <p><span class="boldspan">Model data:</span> {{dataModel}}</p>
 <form #demoForm="ngForm">
 <custom-input name="someValue" [(ngModel)]="dataModel" ngDefaultControl> Write in this wrapper control: </custom-input>
 </form>

08/08/2020, 22h51
krakatoa

je ne vois pas le sharedModule dans l import ownerListmodule

je t'ai pourtant demandé si listComponent faisait partie d'un module et c'est le cas !

je n'ai pas compris ta question.
le shareModule est importé dans le app.module et non dans le owner.module

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
import { SharedModule } from './services/shared/shared.module';
import { OwnerModule } from './modules/application/owner/owner.module';
 
@NgModule({
  declarations: [
  ],
  imports: [
    OwnerModule,
    SharedModule
  ],
  providers: [
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

J'ai ramené l'import du custom-item dans le owner.module

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
import { CustomInputComponent } from '../../../components/custom-input.component';
@NgModule({
  declarations: [
    CustomInputComponent, 
  ],
  imports: [
  ],
  exports: [
    CustomInputComponent,
  ],
})
export class OwnerModule { }

le custom -input s'affiche mais je me pose des questions:
au cas où je dois importé dans le custom-input dans plusieurs composants qui sont chacun dans des modules différents. Comment éviter l'erreur always import dans la mesure où:
je schématise:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
import { SharedModule } from './services/shared/shared.module';
import { OwnerModule } from './modules/application/owner/owner.module';
import { AchatModule } from './modules/application/achar/achat.module;
import { VenteModule } from './modules/application/vente/vente.module';
 
 
@NgModule({
  declarations: [
  ],
  imports: [
    OwnerModule,
    SharedModule
  ],
  providers: [
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
import { CustomInputComponent } from '../../../components/custom-input.component';
@NgModule({
  declarations: [
    CustomInputComponent, 
  ],
  imports: [
  ],
  exports: [
    CustomInputComponent,
  ],
})
export class OwnerModule { }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
import { CustomInputComponent } from '../../../components/custom-input.component';
@NgModule({
  declarations: [
    CustomInputComponent, 
  ],
  imports: [
  ],
  exports: [
    CustomInputComponent,
  ],
})
export class OwnerModule { }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
import { CustomInputComponent } from '../../../components/custom-input.component';
@NgModule({
  declarations: [
    CustomInputComponent, 
  ],
  imports: [
  ],
  exports: [
    CustomInputComponent,
  ],
})
export class AchatModule { }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
import { CustomInputComponent } from '../../../components/custom-input.component';
@NgModule({
  declarations: [
    CustomInputComponent, 
  ],
  imports: [
  ],
  exports: [
    CustomInputComponent,
  ],
})
export class VenteModule { }

Code:

import { CustomInputComponent } from '../../../components/custom-input.component';

sera importé dans les trois modules qui eux a leur tour sont importés dans le app.module d'ou problème.
Je precise que le shar.module n'est importé que dans le app.module.
Si je decide de changer de logique en faisant ainsi:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
import { CustomInputComponent } from '../../components/custom-input.component';
@NgModule({
  imports: [
  ],
  exports: [
    CustomInputComponent,
  ],
  declarations: [
    SwitchComponent,
  ],
})
export class SharedModule { }

puis

Code:

1
2
3
4
5
6
7
8
9
10
11
12
import { SharedModule } from './services/shared/shared.module';
@NgModule({
  declarations: [
  ],
  imports: [
   SharedModule ,
  ],
  exports: [
  ],
})
export class VenteModule { }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
import { SharedModule } from './services/shared/shared.module';
@NgModule({
  declarations: [
  ],
  imports: [
   SharedModule ,
  ],
  exports: [
  ],
})
export class AchatModule { }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
import { SharedModule } from './services/shared/shared.module';
@NgModule({
  declarations: [
  ],
  imports: [
   SharedModule ,
  ],
  exports: [
  ],
})
export class OwnerModule { }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
import { OwnerModule } from './modules/application/owner/owner.module';
import { AchatModule } from './modules/application/achar/achat.module;
import { VenteModule } from './modules/application/vente/vente.module';
 
@NgModule({
  declarations: [
  ],
  imports: [
    OwnerModule,
    SharedModule
  ],
  providers: [
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

J'aurai le même souci car sharedModule sera importé plusieurs fois dans le app.module

Code:

1
2
3
4
5
6
7
8
9
10
11
 
app.module (import shareModule)
                  declarations: [ compX...)   
 
         comp A                                                     comp B
 
    comp A1   comp A2                                     Comp B1    
                   a2.module                                                                                               
                   (import shareModule)                           comp B11     comp B12
                   (declaration: comp X)                                             b12Module  (import shareModule)   
                                                                                              (declarations: [ compX...)

j'ai compris cela: (sauf erreur)

** disons que tous les composants A, A1, a2,B,B1, B11, B12 utilise un comp X de shareModule

** étant donné qu'on a defini un module pour A2, b12, on doit importer shareModule

** les autres composants se referent à son module parent qui app.module

Code:

1
2
3
4
5
6
7
8
9
10
11
12
app.module
  import {Amodule}
  import {Bmodule}
 
a.module
  import {shareModule}
 
b.module
  import {shareModule}
 
share.module
  import {CustomInput}

il y aura deux fois l'import du shareModule dans app.module, d'où problème

a.module et b.module ne sert à rien !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
app.module
  declarations: [ AComponent, BComponent
  import {shareModule}
 
a.module
  declarations: [
  import {}
 
b.module
  declarations: [
  import {}
 
share.module
  declarations: [CustomInput
  export: [CustomInput

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
app.module
  declarations: [ , 
  import {AModule, BModule}
 
a.module
  declarations: [AComponent
  import {SharedModule},
  exports: [    AComponent  ],
 
b.module
  declarations: [BComponent
  import {SharedModule},
  exports: [    BComponent  ],
 
share.module
  declarations: [CustomInput
  export: [CustomInput

attention:
quand vous manipulez les modules, faites toujours un: ng build
plutôt que ng serve qui ne detecte pas les modifs de module