以下是一个使用Angular Material中的mat stepper(步进器)的代码示例:
npm install @angular/material @angular/cdk
import {MatStepperModule} from '@angular/material/stepper';
Step 1
Step 2
Step 3
Step 3
Step 3 content
import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-stepper-example',
templateUrl: './stepper-example.component.html',
styleUrls: ['./stepper-example.component.css']
})
export class StepperExampleComponent implements OnInit {
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
constructor(private _formBuilder: FormBuilder) {}
ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required]
});
this.secondFormGroup = this._formBuilder.group({
address: ['', Validators.required]
});
}
}
这是一个基本的Angular Material mat stepper的示例。您可以根据需要进行修改和扩展。