[英]How to move stepper from one step to second step using angular and angular material
I have 2 - 4 step form.我有 2 - 4 步表格。 I had separate out the form like below structure.
我已经分离出如下结构的表格。 First there is
auth
folder under then there register
folder.首先是
auth
文件夹,然后是register
文件夹。 Under this register
- register.ts
and register.html
.在这个
register
下 - register.ts
和register.html
。 Under register.html
I had implemented mat stepper
like below:在
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>
under my register.ts
:在我的
register.ts
下:
export class RegisterComponent implements OnInit, OnDestroy {
isLinear = true;
}
Now this <kt-stepone>
is my step 1 form which is separate module and there I implemented the Next button.现在这个
<kt-stepone>
是我的第 1 步表单,它是单独的模块,我在那里实现了下一步按钮。
Now when I implemented isLinear = true;
现在,当我实施
isLinear = true;
then even after filling the whole form its not going on next step.然后即使填写了整个表格也不会进行下一步。 If I didnt fill the form then its working as per expection highligting the fileds with red
如果我没有填写表格,那么它会按预期工作,用红色突出显示文件
For ref, here is <kt-stepone>
code:作为参考,这里是
<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>
Since I am using angular for first time, please tell me where I am making mistake in this approach.由于我是第一次使用 angular,请告诉我这种方法哪里出错了。
Updated KT-STEPONE.ts:更新了 KT-STEPONE.ts:
import { MatStepper } from '@angular/material/stepper';
completed=false;
@ViewChild('stepper') stepper: MatStepper;
onSubmit(){
this.stepper.selected.completed = true;
this.stepper.next();
}
I think that your stepper and kt-stepone are not comunicating.我认为您的步进器和 kt-stepone 没有通信。 try implement a service or a @inpit @output to set step valid.
尝试实现服务或@inpit @output 来设置步骤有效。 or if your logic is separated you can remove the [stepControl] and set completed="false" and in your component
或者如果您的逻辑是分开的,您可以删除 [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.