时间戳

首页 > 解决方案 > 如何在角度 7 的垫子步骤标题图标上添加红点？

angular - 如何在角度 7 的垫子步骤标题图标上添加红点？

问题描述

仅当该垫子步骤的表单字段中有任何错误时，我才想在角度材料步进器头图标上添加一个红点。为此，我尝试在 stepper 类中添加 div ，但它没有生效。至少我想知道如何使用类动态添加 div。

<mat-step-header class="mat-horizontal-stepper-header mat-step-header ng-tns-c10-1 ng-star-inserted" role="tab"
    ng-reflect-state="number" ng-reflect-label="Basic Information" ng-reflect-icon-overrides="[object Object]"
    ng-reflect-index="0" ng-reflect-selected="true" ng-reflect-active="true" ng-reflect-optional="false" tabindex="0"
    id="cdk-step-label-0-0" aria-posinset="1" aria-setsize="2" aria-controls="cdk-step-content-0-0"
    aria-selected="true">
    <div class="mat-step-header-ripple mat-ripple" mat-ripple="" ng-reflect-trigger="[object HTMLElement]"></div>
    <div class="mat-step-icon-state-number mat-step-icon mat-step-icon-selected">
        <div class="mat-step-icon-content" ng-reflect-ng-switch="false">
            <span class="ng-star-inserted">1</span>
        </div>
    </div>
    <div class="mat-step-label mat-step-label-active mat-step-label-selected">
        <div class="mat-step-text-label ng-star-inserted">Basic Information</div>
    </div>
</mat-step-header>

标签： angulartypescriptangular-material

解决方案

您可以使用formgroup.valid基于表单有效性返回布尔值的属性，并在 ngClass 的帮助下设置成功或错误类。

相关HTML：

<ng-template matStepLabel>
  <div [ngClass]="firstFormGroup.valid ? 'suc' : 'err'">
    {{firstFormGroup.valid}}
  </div>
</ng-template>

CSS：

.err {
  background-color: red;
}

.suc {
  background-color: green;
}

Here is a working Demo

推荐阅读