Как настроить шаговый материал, чтобы открыть второй элемент по умолчанию и установить цвет значка? (Угловой материал) - PullRequest
Новая
       26

Как настроить шаговый материал, чтобы открыть второй элемент по умолчанию и установить цвет значка? (Угловой материал)

0 голосов
/ 24 апреля 2019

Я использую вертикальный степпер и хочу открыть второй элемент по умолчанию.Теперь открывается первый пункт.Я хотел бы открыть "заполнить ваш адрес" по умолчанию.Для этого я использовал материал Angular.Поэтому, когда я открываю приложение, я хотел бы открыть второй элемент, а также изменить цвет значка.Я прикрепил код.Буду признателен за любую помощь.

html: 

<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
  {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
</button>
<mat-vertical-stepper [linear]="isLinear" #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <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>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Fill out your address</ng-template>
      <mat-form-field>
        <input matInput placeholder="Address" formControlName="secondCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-vertical-stepper>

TS: 

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

/**
 * @title Stepper vertical
 */
@Component({
  selector: 'stepper-vertical-example',
  templateUrl: 'stepper-vertical-example.html',
  styleUrls: ['stepper-vertical-example.css']
})
export class StepperVerticalExample implements OnInit {
  isLinear = false;
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;

  constructor(private _formBuilder: FormBuilder) {}

  ngOnInit() {
    this.firstFormGroup = this._formBuilder.group({
      firstCtrl: ['', Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      secondCtrl: ['', Validators.required]
    });
  }
}

1 Ответ

1 голос
/ 24 апреля 2019

Установить selectedIndex на 1 для степпера

HTML-код 

 <mat-horizontal-stepper  #stepper [selectedIndex]="1" (selectionChange)="stepChange($event)">
         <!-- Your code -->
 </mat-horizontal-stepper>

тс код 

public selectedIndex: number;
public iconColor: stirng;
stepChange(event){
    this.selectedIndex= event.selectedIndex;
    if(event.selectedIndex === 0){
        this.iconColor = 'your color';
    }
}

Или

В html, где вы хотите установить цвет, вы можете сделать это 

<mat-icon [color]="selectedIndex === 0 ? 'primary' : 'warn'"></mat-icon>

или 

<mat-icon [color]="getColor()"></mat-icon>



 getColor(){
    return selectedIndex === 0 ? 'primary' : 'warn'
 }
...