Import package angular material
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 :
Citation:
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:
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:
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:
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 !
