[英]How to move stepper from one step to second step using angular and angular material
我有 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();
}
我认为您的步进器和 kt-stepone 没有通信。 尝试实现服务或@inpit @output 来设置步骤有效。 或者如果您的逻辑是分开的,您可以删除 [stepControl] 并在您的组件中设置 completed="false"
@ViewChild('stepper') stepper: MatStepper;
onButton() {
this.stepper.selected.completed = true;
this.stepper.next();
}
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.