
本文介绍了在线性 mat-horizontal-stepper 中使用单独的组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在 Angular 中,是否可以有一个线性步进器,其中各个步骤是单独的组件?例如:
<mat-step [stepControl]="firstFormGroup" label="Some Form"><第一组件></第一组件></mat-step><mat-step [stepControl]="secondFormGroup" label="另一个表单"><第二成分></第二成分></mat-step><mat-step [stepControl]="thirdFormGroup" label="Review"><第三成分></第三成分></mat-step></mat-horizontal-stepper>
当我尝试此操作时,我在点击 matStepperNext
按钮时收到以下错误:
TypeError: 无法读取未定义的属性无效"
.
解决方案
改进@eliran-eliassy 答案和@christian-steinmeyer 问题.
Parent.Component.ts
导出类 ParentComponent 实现 OnInit {isLinear = true;公司信息:FormGroup;构造函数(私有_formBuilder:FormBuilder){}ngOnInit() {this.companyInfo = this._formBuilder.group({});}}
Parent.Component.html
<mat-step [stepControl]=companyInfo"><form [formGroup]="companyInfo"><ng-template matStepLabel>填写你的名字</ng-template><app-company-info></app-company-info></表单><div><button mat-button matStepperNext>Next</button>
</mat-step></mat-horizontal-stepper>
Child.Component.ts ->这是子表单
导出类 ChildComponent 实现 OnInit {表格:表格组;子窗体:窗体组;构造函数(私有 ctrlContainer:FormGroupDirective,私人 fb:FormBuilder) {}ngOnInit() {this.subForm = this.fb.group({公司名称:[null,[Validators.required]],numOfEmployees: [null, [Validators.required]]});this.form = this.ctrlContainer.form;this.form.addControl(公司", this.subForm);}}
Child.Component.html
<mat-form-field外观=轮廓"><input matInput placeholder="您的公司名称";formControlName=公司名称"></mat-form-field>
在 stackblitz
In Angular, is it possible to have a linear stepper where the individual steps are separate components? For example:
<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>
When I try this, I receive the following error upon hitting the matStepperNext
button:
TypeError: Cannot read property 'invalid' of undefined
.
解决方案
Improving on @eliran-eliassy answer and @christian-steinmeyer question.
Parent.Component.ts
export class ParentComponent implements OnInit {
isLinear = true;
companyInfo: FormGroup;
constructor(private _formBuilder: FormBuilder) {
}
ngOnInit() {
this.companyInfo = this._formBuilder.group({
});
}
}
Parent.Component.html
<mat-horizontal-stepper [linear]="isLinear" #stepper>
<mat-step [stepControl]="companyInfo">
<form [formGroup]="companyInfo">
<ng-template matStepLabel>Fill out your name</ng-template>
<app-company-info></app-company-info>
</form>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
</mat-horizontal-stepper>
Child.Component.ts -> this is the sub-form
export class ChildComponent implements OnInit {
form: FormGroup;
subForm: FormGroup;
constructor(
private ctrlContainer: FormGroupDirective,
private fb: FormBuilder
) {}
ngOnInit() {
this.subForm = this.fb.group({
companyName: [null, [Validators.required]],
numOfEmployees: [null, [Validators.required]]
});
this.form = this.ctrlContainer.form;
this.form.addControl("company", this.subForm);
}
}
Child.Component.html
<div [formGroup]="subForm">
<mat-form-field appearance="outline">
<input matInput placeholder="Your Company Name" formControlName="companyName">
</mat-form-field>
</div>
See this solution on stackblitz
这篇关于在线性 mat-horizontal-stepper 中使用单独的组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!