Question

我目前正在尝试在示例中应用垫步进器功能来自material.angular.io，我正尝试像示例中所示类似地应用

https://stackblitz.com/angular/vmqlalbjanq?file=app%2Fstepper-overview-example.html

在此示例中，这里有3个标签1）填写您的姓名2）填写您的地址，然后3）完成

每个标签中都有类似“填写您的姓名标签”的输入，您必须填写姓氏和名字是必填项，如果您不填写输入内容，则会显示为红色。现在我希望标签也显示为红色如果我没有填写输入内容，有人可以告诉我该怎么做。

Answer 1

要更改材料步进器的样式，您需要覆盖默认的材料步进器样式，如下所示

在您的 style.css 文件

中添加以下样式

SendInput

Forked solution on stackblitz

希望获得帮助！

Answer 2

您必须在stepper-overview-example组件中编辑stepper提供商。

import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';

@Component({
  selector: 'stepper-overview-example',
  templateUrl: 'stepper-overview-example.html',
  styleUrls: ['stepper-overview-example.css'],
   providers: [{
    provide: STEPPER_GLOBAL_OPTIONS, useValue: {showError: true}
  }]
})

如果要显示一些错误消息，请使用errorMessage属性作为mat-step的输入

  <mat-step [stepControl]="firstFormGroup" errorMessage="Name is required.">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field>
        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>

Answer 3

要使步骤标签在输入无效时变为红色，应将标签更改为

  <ng-template matStepLabel>
    <span [ngStyle]="{'color': isNameValid() ? 'black' : 'red'}">Fill out your name</span>
  </ng-template>

并在控制器中添加方法

   isNameValid() {
     return this.firstFormGroup.pristine || this.firstFormGroup.valid;

}

工作示例： https://stackblitz.com/angular/vmqlalbjanq?file=app%2Fstepper-overview-example.html

Answer 4

您可以使用 ng-template 显示标签：

<ng-template matStepLabel>
    <div class="stepper-label"> Name of the label </div>
</ng-template>

现在在CSS文件中，使用“ stepper-label”添加样式：

.stepper-label {
    color:red;
}

如何更改角料垫步进标签的颜色？

4 个答案: