如何使用角度和角度材料將步進器從一步移動到第二步

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 步表單，它是單獨的模塊，我在那里實現了下一步按鈕。

現在，當我實施isLinear = true; 然后即使填寫了整個表格也不會進行下一步。 如果我沒有填寫表格，那么它會按預期工作，用紅色突出顯示文件

作為參考，這里是<kt-stepone>代碼：

<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();
  }

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 之后。 我終於得到了這個的工作解決方案。 請點擊此鏈接。 這樣做的方法是：我們需要將注冊組件中的每個步驟組件都鏈接起來。 這是這方面的指南。

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