Angular Material 7 步进器
<mat-stepper>用于创建一个类似工作流程步骤的向导。
在本章中,我们将展示使用Angular Material绘制步进控制器所需的配置。
创建 Angular 应用
按照以下步骤创建应用程序
1.创建一个名为materialApp的项目。
2.修改app.module.ts, app.component.ts, app.component.css and app.component.htmls。保持其余文件不变。
3.编译并运行程序。
下面是修改后的app.module.ts文件内容。
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {MatStepperModule, MatInputModule, MatButtonModule} from '@angular/material' import {FormsModule, ReactiveFormsModule} from '@angular/forms'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatStepperModule, MatInputModule, MatButtonModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
下面是修改后的app.component.html文件内容。
<mat-horizontal-stepper [linear] = "isLinear" #stepper> <mat-step [stepControl] = "firstFormGroup"> <form [formGroup] = "firstFormGroup"> <ng-template matStepLabel>Enter your name</ng-template> <mat-form-field> <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>Enter your address</ng-template> <mat-form-field> <input matInput placeholder = "Address" formControlName = "secondCtrl" 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> Details taken. <div> <button mat-button matStepperPrevious>Back</button> <button mat-button (click) = "stepper.reset()">Reset</button> </div> </mat-step> </mat-horizontal-stepper>
下面是修改后的app.component.ts文件内容。
import { Component } from '@angular/core'; import { FormControl } from "@angular/forms"; import { FormGroup } from "@angular/forms"; import { FormBuilder } from "@angular/forms"; import { Validators } from "@angular/forms"; export interface Food { value: string; display: string; } @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'materialApp'; 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] }); } }
结果
细节
首先,我们已经使用mat-stepper创建了步进机。
然后,我们使用mat-step添加了内容