Javascript 在父组件中的下一个组件上调用子验证器

我想通过子组件验证器验证我的Mat Stepper Next功能

我有3个不同的表单组件&每个组件都有自己的FormGroup、Validations和Next按钮

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

那么，请帮助我如何在MatStepper Next函数中调用子组件的验证？ 子组件中有“下一步”按钮

比如，若表单已完成或有错误，那个么它将不允许我们跳转到下一个表单

父组件

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

----------------------------------------------

如果任何字段无效，您可以使用mat stepper的completed属性来限制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>

在您的每个组件中，您可以添加get属性isCompleted，它将返回验证和其他检查，无论您想为“下一步”按钮添加什么。与AppForm1Component.ts类似：

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

---

如果任何字段无效，可以使用mat stepper的completed属性来限制“下一步”按钮

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

在您的每个组件中，您可以添加get属性isCompleted，它将返回验证和其他检查，无论您想为“下一步”按钮添加什么。与AppForm1Component.ts类似：

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

---

您可以将表单移动到父组件，并将引用传递给子组件。或者可以使用viewChild获取父组件中的组件实例。您可以将表单移动到父组件，并将引用传递给子组件。或者可以使用viewChild在父组件中获取组件实例我只需要在

这个.form.valid上调用
matStepperNext
，如果我将
matStepperNext
作为属性指令放在子窗体按钮中，它就会工作，但我只需要在
onSubmit（）中调用它，所以它只在窗体有效时工作，请建议我。。！isCompleted正在返回
False
但仍允许导航到下一步，我在下一步按钮中使用
matStepperNext
，无论其
True
还是
False
都允许我们导航到下一步问题已解决。。！！！刚刚在您的代码中添加了
linear
属性
，谢谢您的帮助：）我只需要在
这个.form.valid上调用
matStepperNext
，如果我将
matStepperNext
作为属性指令放在子表单按钮中，它就会工作，但我只需要在
onSubmit（）中调用它
因此只有在表单有效时才有效，请建议我。。！isCompleted正在返回
False
但仍允许导航到下一步，我在下一步按钮中使用
matStepperNext
，无论其
True
还是
False
都允许我们导航到下一步问题已解决。。！！！刚刚在代码中添加了
linear
属性
，谢谢您的帮助：）