问题标签 [mat-stepper]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angular - 如何使用角和角材料将步进器从一步移动到第二步
我有 2 - 4 步表格。我已经分离出如下结构的表格。首先是auth
文件夹,然后是文件register
夹。在这register
-register.ts
和register.html
。在register.html
我实施mat stepper
如下:
根据我的register.ts
:
现在这
<kt-stepone>
是我的第 1 步表单,它是单独的模块,我在那里实现了下一步按钮。
现在,当我实施时isLinear = true;
,即使在填写了整个表格之后,它也不会继续下一步。如果我没有填写表格,那么它会按预期工作,用红色突出显示文件
对于参考,这里是<kt-stepone>
代码:
由于我是第一次使用角度,请告诉我在这种方法中我在哪里犯了错误。
更新了 KT-STEPONE.ts:
angular - 跨多个 mat-steps 使用高级自定义验证
通常,当我在响应式表单中进行复杂的验证时,我会为那些相互依赖的控件定义一个 formGroup。
这在上面的 senario 中是不可能的,我们有3 steps = 3 groups
和依赖的 3 个字段firstUnique, secondUnique, thirdUnique
。
我使用描述的技术SO_answer和Material_docs
到目前为止,我的解决方案正在运行,但我对此并不满意:
- 启动
Unique Validation
时运行一千次(30-40 次)(hacky) - 在整个步进器中任何输入的每次更改都会触发。(这是因为我必须将它添加到整个 formGroup)。
Unique Validation
一个简单的任务,因为这 3 个输入字段需要是唯一的,这已经成为一个样板和复杂的混乱。(请注意
function Unique(arr: string[])
)当正确的步骤被
UNIQUE Validator
或 STEP 再次有效时,不会调用 STEPPER-VALIDATION。(例如:firstUnique = “a”,secondUnique “b”,thirdUnique = “a”(再次))
我的表格
独特的验证者乐趣
angular - 水平步进动画
告诉我如何更改 MatHorizontalStepper 组件的标准过渡动画。
我尝试使用
但没有任何改变
也许我应该更改模板中的某些内容,但是在哪里
angular - 材料步进器 | 标题导航导致方法执行两次
我在每个步骤中都使用带有动态表单的步进器。我已经为返回和下一步按钮创建了方法,我在单击下一步和返回按钮时调用它们,如下所示:
现在我还想在用户单击标题导航时前后移动,所以我也为此创建了一个方法:
在 onNavChange(event) 内部。我根据步骤名称调用方法 next 或 sub 。
问题是,当我单击下一个按钮时,它会被调用两次......首先它调用 onNavChange($event) 然后调用下一个按钮的方法。
我怎样才能确保它只被调用一次?有没有办法让 onNavChange() 仅在单击标题时才执行?
angular - 如何在角度 6 中获取材料步进器的加载事件
我的应用程序中有一个材料垂直步进器,它显示在引导模式中。我在 mat-vertical-stepper 中使用 (selectionChange) 指令来跟踪 onchange 事件。但它最初不会被触发。我的步进数据是动态的,步骤是根据 db 值列出的。我需要在垫子步进器加载时执行一个函数,这需要执行一次。请提供任何帮助。
javascript - 动态添加步骤到 mat-stepper 并导航到它会抛出越界错误
我正在使用一个简单的 mat-stepper,其中步骤是使用*ngFor
.
我想在渲染步进器后动态地向显示器添加一个步骤,然后立即以编程方式导航到它。
动态添加步骤可以正常工作 - 导航部分是问题,因为它会导致异常:“错误:cdkStepper:无法将超出范围的值分配给selectedIndex
”,即使分配的索引应该在基于步骤的范围内传递给组件。
用于说明问题的简化示例(超时只是导致添加额外步骤的异步行为的占位符)。
关于我们如何解决这个问题的任何想法?
完整示例:https ://stackblitz.com/edit/angular-cdafd9?file=app%2Fstepper-overview-example.ts
angular - 如何在 mat-stepper 中显示最后一个 mat-step 已完成?
好的。我不敢相信我第一次就应该如此简单地完成的事情发布问题,但我们到了。
单击特定按钮后,我希望 mat-horizontal-stepper 的最后一步显示一个复选标记图标和绿色背景,就像之前步骤的图标一样。该按钮将是下图中的“是,确认”按钮。
单击后,我希望带有数字 3 的蓝色图标变为我之前描述的复选标记图标,表示现在所有步骤都已完成。步骤 1 和 2 会自动执行,因为一旦按下标记为“matStepperNext”的按钮,似乎“mat-step-icon-state-done”类就会应用于它们。遗憾的是,第 3 步没有这样的按钮,所以必须手动完成。
现在,我已经尝试了所有可以搜索的内容。许多帖子建议使用状态为 using 的自定义图标<ng-template></ng-template>
,但这没有奏效。其他人建议用 标记该步骤completed=true; editable=false;
,但这仅在移动到下一步时也有效,这意味着它不适用于最后一步。我的假设是必须有某种方法以某种方式将“mat-step-icon-state-done”类添加到 mat-icon,但我不确定如何去做。另外,如果我的预感完全消失,请随时为我指出正确的方向。
angular-material - 折叠 Angular Material 垂直步进器中的所有步骤
我想在我的应用程序中实现一个垂直步进器,但找不到任何以“全部折叠”状态开始的方法。目标是用户可以在单击步骤并开始填充或编辑数据之前在屏幕上看到整个折叠的步骤列表。这是否有可能,或者是否有一种解决方法可以用来实现这一点?