在父组件中的角MatStepper上调用子验证器

Question

我想通过子组件验证器来验证我的Mat-Stepper App组件中的下一个功能，

我有三个不同的表单组件&每个组件都有自己的FormGroup、验证和组件中的下一步按钮

我正在调用父组件中的子组件& Mat-Stepper在父组件中存在

那么如何在MatStepper下一个函数中调用子组件的验证呢？子组件中有Next Button

就像如果表单是完整的或者有错误，那么它就不会让我们跳到下一个表单

父组件

----------------------------------------------
<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>

Answer 1

如果任何字段无效，则可以使用mat stepper的完整属性限制next按钮。

<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>

在parent.ts组件中，需要添加子组件引用。

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

在您的每个组件中，您可以添加get属性isCompleted，它将返回验证和其他检查，无论您想为NEXT按钮添加什么。就像你的AppForm1Component.ts：

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