Calling Child Validators on Angular MatStepper Next in Parent Component

Question

I Want To Validate My Mat-Stepper-Next Function in App Component Through Child Component Validators,

I've 3 Different Forms Components & Every Component Has There Own FormGroup, Validations & Next Button in The Component

I'm Calling That Child Components in My Parent Component & My Mat-Stepper is Present in The Parent Component

So Help Me That How To Call The Validations of Child Components in The MatStepper Next Function? Child Components Has Next Button in It

Like If Form is In-Complete or Has Errors Then It Won't Let Us To Jump into Next Form

Parent Component

----------------------------------------------
<mat-horizontal-stepper>
        <mat-step label="Form-1">
            <app-form1></app-form1>
        </mat-step>
        <mat-step label="Form-2">
            <app-form2></app-form2>
        </mat-step>
        <mat-step label="Form-3">
            <app-form3></app-form3>
        </mat-step>
</mat-horizontal-stepper>

you can move form to parent component, and pass reference to child component. or can use viewChild to get component instance in parent component — Praveen Soni

Devang Patel Devang Patel · Accepted Answer · 2021-01-04T07:44:43

You can use the completed property of mat stepper to restrict the next button if any of the field is invalid.

<mat-horizontal-stepper [linear]="true">
        <mat-step label="Form-1" [completed]="appForm1?.isCompleted ? true : false">
            <app-form1></app-form1>
        </mat-step>
        <mat-step label="Form-2" [completed]="appForm2?.isCompleted ? true : false">
            <app-form2></app-form2>
        </mat-step>
        <mat-step label="Form-3" [completed]="appForm3?.isCompleted ? true : false">
            <app-form3></app-form3>
        </mat-step>
</mat-horizontal-stepper>

In your parent.ts component you need to add child component references.

@ViewChild(AppForm1Component) public appForm1: AppForm1Component;
@ViewChild(AppForm2Component) public appForm2: AppForm2Component;
@ViewChild(AppForm3Component) public appForm3: AppForm3Component;

And in your each component you can add get property isCompleted which will return validation and other check whatever you want to add for NEXT button. Like in your AppForm1Component.ts:

get isCompleted(): boolean {
     return (this.form.valid && other checks)
}

Calling Child Validators on Angular MatStepper Next in Parent Component

1 Answers