mat-stepper步骤验证通过已完成却未标记为done状态问题咨询

认知正确性判断 #

你对mat-stepper默认行为的认知是正确的。默认配置下，给mat-step绑定stepControl属性指向对应的FormGroup、且开启linear模式时，只要当前步骤表单验证通过，切换到下一步后前序步骤会自动被标记为done状态，图标也会切换为完成态样式。

场景问题排查点 #

• 未正确绑定stepControl属性：如果仅在步骤内容中声明了FormGroup，没有将该表单实例绑定到对应mat-step的[stepControl]输入属性，stepper无法感知表单的验证状态，不会触发自动标记完成的逻辑。
• 手动覆盖了completed属性逻辑：如果给mat-step手动绑定了[completed]自定义变量，且没有在表单验证通过后将该变量置为true，会覆盖默认的表单关联判断逻辑，导致步骤无法自动标记为完成。
• 未开启linear模式：只有给mat-stepper设置linear属性后，stepper才会将stepControl的验证状态作为步骤完成的默认判断依据，非linear模式下不会自动关联表单状态标记完成。
• 表单验证逻辑存在异常：检查当前步骤FormGroup的valid属性在提交时是否确实为true，如果存在隐藏表单控件未通过验证、自定义验证器返回错误的情况，stepper会判定表单未通过验证，不会标记步骤完成。
• 自定义样式覆盖了默认完成态样式：如果全局或组件内自定义了mat-step-icon-done相关样式，覆盖了官方默认的完成态样式，可能会出现逻辑上已标记为done但视觉无变化的问题，可以通过开发者工具检查对应步骤DOM是否带有mat-step-done类名确认状态。
• editable属性默认开启导致可编辑：mat-step的editable属性默认为true，所以即使步骤被标记为done，仍然可以点击回到编辑状态，如果需要完成后禁止编辑，可给对应mat-step设置[editable]="false"。

内容的提问来源于stack exchange，提问作者Alexandra