Как изменить цвет метки углового материала матового степпера?

Question

В настоящее время я пытаюсь применить функциональность шагового мата в моем приложении. Я рассматриваю пример из material.angular.io. Я пытаюсь применить аналогично, как показано в примере,

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

здесь, в этом примере, есть 3 метки 1) Заполните ваше имя 2) Заполните ваш адрес и 3) Готово

в каждом ярлыке есть входные данные, такие как в Заполните вашу метку имени у вас естьзаполнить фамилию и Имя , что необходимо, и если вы не заполните данные, они отображаются красным цветом.Теперь я хочу, чтобы метка также отображалась красным цветом, если я не заполняю поля ввода, может кто-нибудь сказать мне, как это сделать.

Answer 1

Чтобы изменить стиль пошагового материала, вам нужно переопределить стиль пошагового материала по умолчанию, как показано ниже

Добавить стиль ниже в вашем style.css файле

.basic-container .mat-step-header .mat-step-icon-selected {
  background-color: #6cb73a;
  color: #fff;
}

.mat-step-header .mat-step-icon {
    background-color: rgba(167, 35, 35, 0.54);
    color: #fff;
}

Разветвленный раствор на стеке

Надеюсь, это поможет!

Answer 2

Чтобы ваша метка шага стала красной, когда ввод недействителен, вы должны изменить свою метку на

  <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 3

Вы должны отредактировать поставщика степпера в компоненте примера обзора степпера.

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>