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