问题标签 [angular-material-stepper]

我正在使用角度步进器来显示我的所有数据并为某些文本框输入输入，但是我想在用户单击Next按钮时添加我的自定义验证。

stackblitz - 材料步进定制验证

html:

在这里，应该在进入下一步之前验证名字和姓氏，而不是使用 formGroup。

ts：

如何？- 如果名字是空的，那么不要让他们去Next步进。

我的步进器中有很多步骤，所以我想把它分成两部分，即

当用户进入向导时，步进器标题仅显示 1--2--3--4，然后，当第 4 步完成，用户进入第 5 步时，标题显示 5--6--7-- 8，以此类推进行下一步。

你知道有什么办法吗？

提前致谢。

编辑：

我尝试使用*ngIf隐藏/取消隐藏步骤，但它确实从步进器数组中删除了这些步骤，因此当步骤隐藏时输入的信息会丢失。

这是我的 *ngIf 方法：https ://stackblitz.com/edit/angular-material2-beta-kknvx9

此外，尝试了与 类似的方法[hidden]，但它根本不起作用。

尝试实现一个复选框，我可以在其中动态设置值（并让它出现在框中）。

HTML

材料.module.ts

主模块.ts

有一个单选按钮可以打开和关闭 isReply()。

当我打开 isReply() 时，我可以看到 CheckBox 标签从“CheckBox”变为“CheckBox off”，但复选框状态（可见）没有改变。

我可以应用其他响应复选框关闭的逻辑，即使该复选框仍处于可见选中状态（真）。这会将复选框的值更改为 false，即使该复选框仍处于可见选中状态 (true)。

当我单击复选框（清除可见框）时，值会切换并且响应符合预期，即使未选中该框，复选框的值现在也是 true。

我做了以下更改，但仍然不起作用

在 ts 中：

我有两个单选按钮（标准和回复）。

单选按钮的 html：

setBoxes() 的代码：

单击“回复”单选按钮会更改复选框的值，但不会更改按钮的状态。

除了单击复选框外，我无法更改按钮状态。

不推荐使用 Angular 7.2.3 [(ngModel)]。

我使用角度材料库创建了一个简单的角度应用程序，其中我使用了对话框组件。当用户打开对话框时，它将具有角材料的步进组件。它有 3 个步骤。每个步骤都有角度反应形式。我面临的问题是，当用户打开对话框焦点直接在步进器标题的第一步上完成。我想在第一步中专注于反应形式的第一种形式控制。

在component.ts文件中，我写了

在ngAfterViewInit方法中，我在名称变量上调用了焦点方法，例如：

它可以工作，但是我得到的输出就像它首先关注FormControl然后再将焦点移到步进头的第一步。我应该如何防止步进头的第一步集中注意力并首先关注FormControl？

我想用这个：https ://material.angular.io/components/stepper/overview

但是出于布局（可以是动态的）的目的，我可能会或可能不会在步骤的可点击标题和它的内容之间有元素，我想要有步进器的内容（圆形图标下方的所有内容和步骤的标签）在 DOM 标签之外</mat-horizontal-stepper>。

其他一些组件通过使用模板名称在步骤的标记中命名某个变量来完成此操作，并在稍后在 DOM 中声明它。

但是，如果我这样做：

内容显示在包含步进器的第一个 div 中，而不是卡片。

我的第二次尝试如下（我颠倒了调用者和被调用者）：

这次内容出现在我想要的位置，但同时所有内容都可见。

材料步进器是否可以在 matstepper 中分离标题和内容？

总结一下：我想把内容放在<mat-step>外面</mat-horizontal-stepper>（除了matStepLabel，我不在乎它必须去哪里）。

我正在尝试使用角度材料步进器作为进度跟踪器（我知道它不是为此而设计的......但这是唯一符合我要求的）。我的步进器中有 5 个步骤。

我想在产品或项目达到该点时打开颜色。我 mat-step-icon-selected为它找到了课程。但它不起作用。

我将从返回状态/步骤编号的 API 中获取数据。并基于此我需要改变颜色。

我无法更改班级的颜色。我尝试使用ngClassonmat-step 但它不起作用。

这是我的代码：

建议一个解决方案来更新所显示的步进器的颜色。

谢谢 ：）

我有一个 Angular Material Stepper，有 3 个步骤。

这些步骤被标记为 complete=false，因此您在完成之前无法进入下一步。

但是，如果我将一个步骤标记为完成， stepper.next 似乎会进入不确定状态。

示例：https ://stackblitz.com/edit/angular-oyeqzm?file=src%2Fapp%2Fstepper-states-example.ts

就像步进器没有“刷新”以了解步骤的完成状态。

有什么想法吗？

在进行此 API 调用之前，我需要删除包含 selectedPlan 值为 null 的产品。我不确定为什么以下内容不起作用。在作为参数传递给 startEnrollment() 之前，我是否需要重新分配步进器数组？

我使用角材料步进器。我从后端获取数据，根据这些数据我应该设置特定的步骤。我使用 [selectedIndex] 指令，但 selectedIndex 不适用于我传递给它的值。setTimeout 我试过了，它对我不起作用。SelectedIndex 等于 0。为什么 selectedIndex 不适用于 currentStep？以及如何解决这个问题？

我在使用 Angular 时遇到了这个烦人的问题：我通过添加到provides页面中来覆盖步进器图标：

这是 HTML 页面（只是一小部分，复制/粘贴了 7 个元素）：

如您所见，这只是您可以在 Angular 9文档中找到的示例

好吧，现在让我用几个图像来介绍问题：

看看圆圈，他们应该有自己的图标（gavel、constact_support、forum）。但是当我在其中一个步骤上时，它会用另一个图标替换图标，准确地说是create icon。

现在，如果我回到第二步，在圆圈中生成正确的图标，而不会出现这种烦人的覆盖：

我已经尝试过：

1. [completed]=false在组件上设置<mat-step>，但它只是将检查图标删除到以前的圆圈中
2. 覆盖图标：

但它没有用，因为它只是覆盖了图标，所以问题仍然存在。我也试图留下<mat-icon></mat-icon>空白，但当然它只会在圆圈中留下一个空白图标。

我想要实现的是绕过这种“自动覆盖”。任何想法？