Как переместить степпер от одного шага ко второму шагу, используя угловой и угловой материал

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

После RnD по этому поводу. Я наконец получил рабочее решение этого. Пожалуйста, перейдите по этой ссылке. Способ сделать это: нам нужно связать компонент каждого шага в компоненте регистра. Вот руководство для этого.

Answer 2

Я думаю, что ваш степпер и кт-степон не общаются. попробуйте внедрить службу или @inpit @output, чтобы установить действительный шаг. или если ваша логика разделена, вы можете удалить [stepControl] и установить завершено ="ложь" и в вашем компоненте

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

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>