[英]How to use a material stepper in Angular 5
I'm currently somewhat new to Angular and I'm trying to figure out how to make a simple stepper that goes (1) -- (2) -- (3).我目前对 Angular 有点陌生,我正试图弄清楚如何制作一个简单的步进器,它可以 (1) -- (2) -- (3)。
I have the html down as app.component.html我有 html 作为 app.component.html
<mat-horizontal-stepper [linear]="true" #stepper>
<mat-step label="Step 1">
step 1
</mat-step>
<mat-step label="Step 2">
step 2
</mat-step>
</mat-horizontal-stepper>
However, what do I need to import and do in typescript to make this work?但是,我需要在打字稿中导入和执行哪些操作才能使其工作? I have app.component.ts as
我有 app.component.ts 作为
import { Component, ViewChild } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
@ViewChild('stepper') stepper;
changeStep(index: number) {
this.stepper.selectedIndex = index;
}
}
Import the following components of angular material and use the same code that you have导入以下角度材料组件并使用您拥有的相同代码
Module.ts模块.ts
import { MatStepperModule, MatInputModule, MatButtonModule, MatAutocompleteModule } from '@angular/material';
@NgModule({
imports: [
...
MatStepperModule,
MatInputModule,
MatButtonModule,
MatAutocompleteModule,
],...
HTML HTML
<mat-horizontal-stepper [linear]="isLinear">
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Step 1</ng-template>
<button mat-button mat-raised-button color="primary" matStepperNext>Solve</button>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Step 2</ng-template>
<mat-form-field>
<input matInput placeholder="Any input" formControlName="secondCtrl" required>
</mat-form-field>
<button mat-button mat-raised-button color="primary" matStepperNext>Next</button>
<button mat-button mat-raised-button color="" matStepperPrevious>Back</button>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel icon>Done</ng-template>
You are now done.
<button mat-button mat-raised-button color="primary" >Done</button>
</mat-step>
</mat-horizontal-stepper>
Component.ts组件.ts
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
....
export class ComponentStepper{
isLinear = true;
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
constructor(private _formBuilder: FormBuilder){}
ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
});
this.secondFormGroup = this._formBuilder.group({
secondCtrl: ['', Validators.required]
});
}
}
This is a complete Demo even with FormGruop validations即使有 FormGruop 验证,这也是一个完整的Demo
Along with Abel Valdez's answer dont forget to import CdkStepperModule to stepper to work随着 Abel Valdez 的回答,不要忘记将CdkStepperModule导入 stepper 才能工作
import { CdkStepperModule } from '@angular/cdk/stepper';
and和
imports: [
...
CdkStepperModule,
MatStepperModule,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.