angular - 如何使用角和角材料将步进器从一步移动到第二步
问题描述
我有 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>
由于我是第一次使用角度,请告诉我在这种方法中我在哪里犯了错误。
更新了 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();
}
推荐阅读
- firebase - createUserWithEmailAndPassword() 后无法重定向
- python-3.x - “NoneType”对象没有属性“pydev_do_not_trace”
- elasticsearch - 如何在 Kubernetes 上为 elasticsearch 编辑 path.data 和 path.log?
- python - 将 Django 管理站点用于模型的特定实例
- php - 如何在 laravel 中使用 laravel 中的多个输入字段实现搜索功能
- cuda - 为什么 nvprof 没有浮点除法运算的指标?
- javascript - 如何杀死正在执行的异步函数
- c++ - 在另一个 QThread 上运行成员方法时,无法将事件发送到不同线程拥有的对象
- docker - 使用 mssql-tools 登录 Docker 失败
- youtube-api - 指定收件人 Youtube api v3 插入评论