如何使用角和角材料将步进器从一步移动到第二步

Posted 2023-05-07

【中文标题】如何使用角和角材料将步进器从一步移动到第二步

【英文标题】：How to move stepper from one step to second step using angular and angular material

【发布时间】：2019-09-15 20:46:41

【问题描述】：

我有 2 - 4 步表格。我已经分离出如下结构的表格。 首先是auth 文件夹，然后是register 文件夹。在此 register - register.ts 和 register.html 下。在register.html 下，我实现了mat stepper，如下所示：

 <mat-horizontal-stepper [linear]="isLinear" #stepper>

                    <mat-step [stepControl]="firstFormGroup">
                      <form [formGroup]="firstFormGroup">
                        <ng-template matStepLabel> step 1 </ng-template>
                        <mat-card class="example-card">
                                <mat-card-header>
                                    <div mat-card-avatar class="example-header-image"></div>
                                    <mat-card-title>step 1</mat-card-title>
                                </mat-card-header>
                                <mat-card-content>
                                        <kt-stepone></kt-stepone>
                                </mat-card-content>

                        </mat-card>

                        <div>

                        </div>
                      </form>
                    </mat-step>

                    <mat-step [stepControl]="secondFormGroup">
                      <form [formGroup]="secondFormGroup">
                        <ng-template matStepLabel> step 2 </ng-template>
                            <mat-card class="example-card">
                                <mat-card-header>
                                    <div mat-card-avatar class="example-header-image"></div>
                                    <mat-card-title>step 2</mat-card-title>
                                </mat-card-header>
                                <mat-card-content>
                                        <kt-steptwo></kt-steptwo>
                                </mat-card-content>
                            </mat-card>

                      </form>
                    </mat-step>

在我的register.ts 下：

export class RegisterComponent implements OnInit, OnDestroy 
  isLinear = true;

现在这个 <kt-stepone> 是我的第 1 步表单，它是单独的模块，我在那里实现了下一步按钮。

现在，当我实施isLinear = true; 时，即使填写了整个表单，它也不会继续下一步。如果我没有填写表格，那么它会按预期工作，用红色突出显示文件

对于参考，这里是<kt-stepone>code：

<form class="kt-form" [formGroup]="steponeForm" autocomplete="off" (ngSubmit)="onSubmit()">
            <div class="kt-portlet__body" >
                //MY FORM
            </div>
                 // submit button
            <button mat-button matStepperNext color="primary" type="submit">Next</button>

</form>

由于我是第一次使用 angular，请告诉我在这种方法中我在哪里犯了错误。

更新了 KT-STEPONE.ts：

import  MatStepper  from '@angular/material/stepper';
completed=false;
@ViewChild('stepper') stepper: MatStepper;
onSubmit()

    this.stepper.selected.completed = true;
    this.stepper.next();
  

【参考方案1】：

我认为您的步进器和 kt-stepone 没有通信。尝试实现服务或@inpit @output 以设置步骤有效。或者如果您的逻辑是分开的，您可以删除 [stepControl] 和 设置完成=“假” 在你的组件中

@ViewChild('stepper') stepper: MatStepper;
onButton() 
  this.stepper.selected.completed = true;
  this.stepper.next();

【讨论】：

我应该在哪里包含 @ViewChild('stepper') stepper: MatStepper; 。我应该在类中的构造函数之前还是在类本身之前包含它？另外， MatStepper 是指它的 MatStepperModule 吗？ @Lean Pilar

请按照您的说明查找更新后的 kt-stepone.ts。但即使字段为空@Lean Pilar

，它也会进入下一步

在你使用 mat-h​​orizo​​ntal-stepper 的类中构造函数之前的类内

mat-h​​orizo​​ntal-stepper 在我的主要 register.html 中。从 mat-h​​orizo​​ntal-stepper 中，我删除了 [stepControl]。我应该在哪里添加completed="false"，我的意思是哪个ts文件：注册或kt-stepone @Lean Pilar

将 [stepControl]=... 替换为 completed="false"。但是，如果您的步进器上没有按钮，但只有 iinside 尝试从 kt-stepone 向步进器发出事件并监听事件并触发 onButton 功能

【参考方案2】：

在 RnD 之后。我终于得到了这个工作的解决方案。请关注此link。这样做的方法是：我们需要在注册组件中连接每一步组件。 Here 是这方面的指南。

【参考方案3】：

<mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
        <ng-template matStepLabel> step 1 </ng-template>
        <mat-card class="example-card">
            <mat-card-header>
                <div mat-card-avatar class="example-header-image"></div>
                <mat-card-title>step 1</mat-card-title>
            </mat-card-header>
            <mat-card-content>
                <kt-stepone></kt-stepone>
            </mat-card-content>

        </mat-card>

        <div>

        </div>
    </form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
        <ng-template matStepLabel> step 2 </ng-template>
        <mat-card class="example-card">
            <mat-card-header>
                <div mat-card-avatar class="example-header-image"></div>
                <mat-card-title>step 2</mat-card-title>
            </mat-card-header>
            <mat-card-content>
                <kt-steptwo></kt-steptwo>
            </mat-card-content>
        </mat-card>

    </form>
</mat-step>