javascript 如何在 Angular 5 中使用材料步进器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50338642/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use a material stepper in Angular 5
提问by user10109
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;
}
}
回答by Abel Valdez
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 Demoeven with FormGruop validations
即使有 FormGruop 验证，这也是一个完整的演示
