У меня 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();
}