要使用 Angular Material 步进器(Stepper),首先需要安装 Angular Material 模块和 Angular CDK(Component Development Kit)。然后,你可以按照以下步骤生成一个简单的步进器:
npm install @angular/material @angular/cdk
在 app.module.ts
文件中,导入 Material 模块和 CDK 模块:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatStepperModule } from '@angular/material/stepper';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatButtonModule,
MatStepperModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
在 app.component.html
文件中,添加以下代码:
Step 3
Step 3 content
app.component.ts
文件中,添加以下代码:import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
firstStepForm: FormGroup;
secondStepForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.firstStepForm = this.formBuilder.group({
name: ['', Validators.required]
});
this.secondStepForm = this.formBuilder.group({
email: ['', Validators.required]
});
}
}
这样,你就创建了一个包含步进器的 Angular Material 组件。你可以根据需要进一步自定义步进器的样式和行为。