在Angular中,是否可以使用线性步进器,其中各个步骤是单独的组件?例如:
<mat-horizontal-stepper [linear]="isLinear">
<mat-step [stepControl]="firstFormGroup" label="Some Form">
<first-component></first-component>
</mat-step>
<mat-step [stepControl]="secondFormGroup" label="Another Form">
<second-component></second-component>
</mat-step>
<mat-step [stepControl]="thirdFormGroup" label="Review">
<third-component></third-component>
</mat-step>
</mat-horizontal-stepper>
当我尝试这个时,我在按下matStepperNext
按钮时收到以下错误:
TypeError: Cannot read property 'invalid' of undefined
。
这是适合我的解决方案。
<mat-horizontal-stepper [linear]="true" #stepper>
<mat-step [stepControl]="selectAdvType">
<ng-template matStepLabel>
<div class="text-center">
<mat-icon>queue_play_next</mat-icon><br /><span>Select Adv Type</span>
</div>
</ng-template>
<app-advertisement-type></app-advertisement-type>
</mat-step>
<mat-step [stepControl]="selectAdvType">
<ng-template matStepLabel>
<div class="text-center">
<mat-icon>directions_car</mat-icon><br /><span>Select Car</span>
</div>
</ng-template>
<app-select-car-adv></app-select-car-adv>
</mat-step>
<mat-step>
<ng-template matStepLabel>
<div class="text-center">
<mat-icon>description</mat-icon><br /><span>Select Features</span>
</div>
</ng-template>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-horizontal-stepper>
父Ts文件
@Component({
selector: 'app-customer.create.advertisement',
templateUrl: './customer.create.advertisement.component.html',
styleUrls: ['./customer.create.advertisement.component.scss']
})
export class CustomerCreateAdvertisementComponent implements OnInit {
isLinear = false;
selectAdvType: FormGroup;
constructor(private _formBuilder: FormBuilder) { }
ngOnInit() {
this.selectAdvType = this._formBuilder.group({
firstCtrl: ['', Validators.required]
});
}
}
儿童组件
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fill out 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>
@Component({
selector: 'app-advertisement-type',
templateUrl: './advertisement-type.component.html',
styleUrls: ['./advertisement-type.component.scss']
})
export class AdvertisementTypeComponent implements OnInit {
firstFormGroup: FormGroup;
constructor(private _formBuilder: FormBuilder) { }
ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
firstCtrl: ['', Validators.required]
});
}
}
您可以使用子表单来解决它。几个月前我在Angular-UP会议上发表了一篇关于它的演讲:https://www.youtube.com/watch?v=sb7tgsNF2Jk
通常,这个想法是在子组件中创建表单,使用DI注入controlContainer并将本地表单设置为controlContainer表单。
子组件:
@Component({
selector: 'app-company-info',
templateUrl: './company-info.component.html',
styleUrls: ['./company-info.component.scss'],
viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class CompanyInfoComponent implements OnInit {
form: FormGroup;
constructor(
private ctrlContainer: FormGroupDirective,
private fb: FormBuilder) { }
ngOnInit() {
this.form = this.ctrlContainer.form;
this.form.addControl('company',
this.fb.group({
'companyName': this.fb.control(null, [Validators.required]),
'numOfEmployees': this.fb.control(null, [Validators.required])});
}
}
父组件(html):
<mat-horizontal-stepper [linear]="isLinear" #stepper>
<mat-step [stepControl]="companyInfo">
<ng-template matStepLabel>Fill out your name</ng-template>
<form [formGroup]="companyInfo">
<app-company-info></app-company-info>
</form>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
</mat-horizontal-stepper>
父组件(ts):
export class WizardComponent implements OnInit {
isLinear = true;
companyInfo: FormGroup;
constructor(private _formBuilder: FormBuilder) {
}
ngOnInit() {
this.companyInfo = this._formBuilder.group({
});
}
}
好的,我想我看到了一些问题:
<mat-horizontal-stepper [linear]="isLinear">
<mat-step [stepControl]="foodFormGroup">
<food-selection></food-selection>
</mat-step>
<mat-step [stepControl]="pieFormGroup">
<pie-selection></pie-selection>
</mat-step>
</mat-horizontal-stepper>
需要在你的tough-choice.component.ts文件中定义foodFormGroup和pieFormGroup(在你的示例代码中,btw拼写错误)
以下是一个示例(来自文档)的示例:
import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
/**
* @title Stepper overview
*/
@Component({
selector: 'stepper-overview-example',
templateUrl: 'stepper-overview-example.html',
styleUrls: ['stepper-overview-example.css']
})
export class StepperOverviewExample {
isLinear = false;
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]
});
}
}
另外,我没有在您的示例中看到module.ts文件。这就是你想要导入@ angular / material模块的地方,而不是组件文件。
我建议只给一次Angular Material文档。 https://material.angular.io/components/stepper/overview
在这篇文章中回答:qazxsw poi
*对不起,如果这不是链接其他帖子的正确方法。