Discussion :

[olivier252]

Hello,

Je galère lamentablement : j'essaie d'intégrer un stepper material comme ici :
https://stackblitz.com/angular/lyevb...rial-module.ts
Les modules material que j'ai importés dans mon module module n'ont pas l'air d'etre pris en compte et je comprends pas pourquoi. J'ai essayé de les mettre dans le module app, mais sans succès aussi...
Mais j'ai des erreurs à la pelle sur mes imports comme ceci :

Error: src/app/utilities/price-utility/price-utility.component.html:17:15 - error NG8002: Can't bind to 'stepControl' since it isn't a known property of 'mat-step'.
1. If 'mat-step' is an Angular component and it has 'stepControl' input, then verify that it is part of this module.
2. If 'mat-step' 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.

17 <mat-step [stepControl]="secondFormGroup">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/utilities/price-utility/price-utility.component.ts:6:16
6 templateUrl: './price-utility.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component PriceUtilityComponent.


Error: src/app/utilities/price-utility/price-utility.component.html:18:13 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.

18 <form [formGroup]="secondFormGroup">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/utilities/price-utility/price-utility.component.ts:6:16
6 templateUrl: './price-utility.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component PriceUtilityComponent.


Error: src/app/utilities/price-utility/price-utility.component.html:20:9 - error NG8001: 'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

20 <mat-form-field>
~~~~~~~~~~~~~~~~

src/app/utilities/price-utility/price-utility.component.ts:6:16
6 templateUrl: './price-utility.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component PriceUtilityComponent.


Error: src/app/utilities/price-utility/price-utility.component.html:21:11 - error NG8001: 'mat-label' is not a known element:
1. If 'mat-label' is an Angular component, then verify that it is part of this module.
2. If 'mat-label' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

21 <mat-label>Address</mat-label>
~~~~~~~~~~~

src/app/utilities/price-utility/price-utility.component.ts:6:16
6 templateUrl: './price-utility.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component PriceUtilityComponent.


Error: src/app/utilities/price-utility/price-utility.component.html:31:5 - error NG8001: 'mat-step' is not a known element:
1. If 'mat-step' is an Angular component, then verify that it is part of this module.
2. If 'mat-step' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message

voici le compo en question :

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
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
<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
    {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
  </button>
  <mat-vertical-stepper [linear]="isLinear" #stepper>
    <mat-step [stepControl]="firstFormGroup">
      <form [formGroup]="firstFormGroup">
        <ng-template matStepLabel>Fill out your name</ng-template>
        <mat-form-field>
          <mat-label>Name</mat-label>
          <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
        </mat-form-field>
        <div>
          <button mat-button matStepperNext>Next</button>
        </div>
      </form>
    </mat-step>
    <mat-step [stepControl]="secondFormGroup">
      <form [formGroup]="secondFormGroup">
        <ng-template matStepLabel>Fill out your address</ng-template>
        <mat-form-field>
          <mat-label>Address</mat-label>
          <input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY"
                 required>
        </mat-form-field>
        <div>
          <button mat-button matStepperPrevious>Back</button>
          <button mat-button matStepperNext>Next</button>
        </div>
      </form>
    </mat-step>
    <mat-step>
      <ng-template matStepLabel>Done</ng-template>
      <p>You are now done.</p>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button >Reset</button>
      </div>
    </mat-step>
  </mat-vertical-stepper>

.ts :

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
export class PriceUtilityComponent implements OnInit {
 
  isLinear = false;
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;
 
  constructor(private _formBuilder: FormBuilder) {}
 
  ngOnInit() {
    this.firstFormGroup = this._formBuilder.group({
      firstCtrl: ['', Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      secondCtrl: ['', Validators.required]
    });
  }
 
}

et le module :

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
import {MatStepperModule} from '@angular/material/stepper';
import {MatFormFieldModule} from '@angular/material/form-field'
import {MatInputModule} from '@angular/material/input';
import { ReactiveFormsModule } from '@angular/forms';
 
@NgModule({
  declarations: [
    PriceUtilityComponent
  ],
  exports: [
    PriceUtilityComponent,
 
    // Material
    MatStepperModule,
    MatFormFieldModule,
    MatInputModule,
    ReactiveFormsModule
  ],
  imports: [
    CommonModule,
    PriceUtilityRoutingModule,
 
    // Material
    MatStepperModule,
    MatInputModule,
    MatFormFieldModule,
    ReactiveFormsModule
  ]
})
export class PriceUtilityModule { }

merci !

[krakatoa]

regarde cet exemple :
https://iner-dukoid.developpez.com/t...-angular/#LXIX


on met les composants materials que l'on a besoin dans un module à part

/shared/material-design.module.ts

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
 
import { NgModule } from '@angular/core';                
import { CommonModule } from '@angular/common';
// Material
import { MatGridListModule } from '@angular/material/grid-list';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatCheckboxModule } from '@angular/material/checkbox';
 
@NgModule({
  declarations: [],
  imports: [
    CommonModule,
 
    MatFormFieldModule,               // on importe uniquement les composants dont on a besoin
    MatGridListModule,                // inutile de tout importer
    NoopAnimationsModule,
    MatInputModule,
    MatButtonModule,
    MatCheckboxModule,
 
  ],
  exports: [
    MatFormFieldModule,               // ne pas oublier d'exporter pour qu'il puisse être importé dans le module qui le demande
    MatGridListModule,
    NoopAnimationsModule,
    MatInputModule,
    MatButtonModule,
    MatCheckboxModule,
 
  ]
})
export class MaterialDesignModule { }

ensuite tu importes ce module là ou tu en as besoin:

bidule.module.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
imports: [
   MaterialDesignModule,
   ...

et voilà.


quand on touche aux modules, il faut toujours couper le 'ng serve' et le relancer !

[olivier252]

oui de base je voulais faire un module angularmaterial de base, mais mon chef de projet veut pas pour je ne sais quelle raison... Merci pour le ng serve.. tu me l'avais déjà dis et je n'ai pas oublié !

[krakatoa]

ah c'est pourtant la bonne pratique, bon, faut toujours écouter le chef !


alors, pour tester met juste un mat-step dans le html
ensuite dans son module

fait un import du mat-step :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
import {MatStepperModule} from '@angular/material/stepper';
 
imports: [
MatStepperModule

ça donne quoi ?

[olivier252]

Bah, je suis désolé, j'ai oublié que mon compo (¨PriceComponent") était lui même dans un autre compo appelé "layoutComponent (qui lui est ds AppComponent)
Du coup j'avais zappé de mettre "priceModule" en import dans LayoutComponent. Je suis vraiment désolé. Mais merci pur le lien de Dukoïd, c'est toujours une bonne piqure de rappel d'aller se promener là-bas ! (tuto de fou...Le jour où je le maitriserai celui-là....)

[krakatoa]

pas de problème.
c'est les joies de l'apprentissage, parfois on reste bloqué sur un truc bête.. ça m'est arrivé des milliers de fois

[olivier252]

C'est clair j'ai l'impression que je vais rester junior tte ma vie...

[krakatoa]

MDR, mais non !
si tu es courageux, tout est possible

[olivier252]

Ahah, heureusement que t'es là, je devrais te payer une bière pour ttes les galères dont tu m'a sorti...Si jamais tu passes ds la région de Bordeaux lol....