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

Question

我有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步形式，它是单独的模块，在那里我实现了Next按钮。

现在，当我实施isLinear = true;时，即使填写整个表格后，它也不会进行下一步。如果我没有填写表格，那么它的工作按照预先用红色标记文件

对于ref，这里是<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>

由于我第一次使用角度，请告诉我在这种方法中我犯了什么错误。

更新了KT-STEPONE.ts：

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

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

Answer 1

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

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

Answer 2

在RnD之后。我终于得到了解决方案。请关注这个link。这样做的方法是：我们需要链接寄存器组件中的每个步骤组件。 Here就是这方面的指南。