Question

我有@ Angular / Material的Stepper，它看起来很棒。但是，我看到许多例子只打开了当前步骤。我想要这个功能。应关闭所有非活动步骤。

[编辑]：刚刚添加到HTML和TS文件中。

组件HTML文件

<img width="350px" align="middle" mat-card-image src="../assets/Icon_Rev8.png" alt="Logo">
<mat-card-content>
   <mat-tab-group mat-stretch-tabs [selectedIndex]="0" dynamicHeight=true>
      <mat-tab label="Login">
         <form>
            <mat-form-field class="sameWidth">
               <input matInput style="width:100%;" placeholder="Username">
            </mat-form-field>
            <mat-form-field class="sameWidth">
               <input matInput style="width:100%;" placeholder="Password">
            </mat-form-field>
         </form>
         <button class="sameWidth" mat-raised-button color="primary">Login</button>
         <button class="sameWidth" mat-button color="primary">Forgot Password?</button>
      </mat-tab>
      <mat-tab label="Register">
         <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
         <mat-vertical-stepper [linear]=true>
            <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 [active]="true" [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>
               </div>
            </mat-step>
         </mat-vertical-stepper>
         <!--<form>
            <table cellspacing="0">
               <tr>
                  <td>
                     <mat-form-field>
                        <input style="width: 40%;" matInput placeholder="First Name">
                     </mat-form-field>
                  </td>
                  <td>
                     <mat-form-field>
                        <input style="width: 40%;" matInput placeholder="Last name">
                     </mat-form-field>
                  </td>
               </tr>
            </table>
            <mat-form-field style="width:100%;">
               <input matInput  placeholder="Password">
            </mat-form-field>
            </form>-->
         <mat-checkbox style="z-index: 1000;" color="primary">I Agree to the Terms and Conditions</mat-checkbox>
         <button class="sameWidth" mat-raised-button color="primary">Register</button>
      </mat-tab>
   </mat-tab-group>
</mat-card-content>

组件TS文件

import { Component, OnInit, ViewEncapsulation, Inject } from "@angular/core";
import {
    MatIconRegistry,
    MatDialog,
    MatDialogRef,
    MAT_DIALOG_DATA
} from "@angular/material";
import { DomSanitizer } from "@angular/platform-browser";
import { HttpClientModule, HttpClient } from "@angular/common/http";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";

@Component({
    selector: "app-login",
    templateUrl: "login.component.html",
    styleUrls: ["login.component.css"]
})
export class LoginComponent {
    animal: string;
    name: string;

    constructor(
        private _formBuilder: FormBuilder,
        iconRegistry: MatIconRegistry,
        sanitizer: DomSanitizer,
        public dialog: MatDialog
    ) {
        iconRegistry.addSvgIcon(
            "close",
            sanitizer.bypassSecurityTrustResourceUrl(
                "assets/icons/ic_close_48px.svg"
            )
        );
    }

    openDialog(): void {
        let dialogRef = this.dialog.open(LoginDialogComponent, {
            width: "400px",
            data: { name: this.name, animal: this.animal }
        });

        dialogRef.afterClosed().subscribe(result => {
            console.log("The dialog was closed");
            this.animal = result;
        });
    }
}
@Component({
    selector: "dialog-login",
    templateUrl: "loginDialog.component.html",
    styleUrls: ["loginDialog.component.css"]
})
export class LoginDialogComponent {
    constructor(
        private _formBuilder: FormBuilder,
        public dialogRef: MatDialogRef<LoginDialogComponent>,
        @Inject(MAT_DIALOG_DATA) public data: any
    ) {}

    onNoClick(): void {
        this.dialogRef.close();
    }

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

我的现状：

我的目标：

Answer 1

我只是将您的代码复制粘贴在默认的角度材质步进代码中，它就像您的目标一样显示

https://stackblitz.com/edit/angular-tpeo6s?embed=1&file=app/stepper-overview-example.html

修改

对我来说似乎是有角度的物质错误。

如果步进器没有标签，它正在工作但在标签内，但aria-expanded="false"用于非活动步骤，材料不会添加style="height: 0px; visibility: hidden;"来隐藏非活动步骤。

您可以记录与角度材料2 HERE
相关的问题

Answer 2

尚未正式修复。我已经提交了一份错误报告，正在调查中。目前我已经研究并找到了解决此问题的方法。我必须将(selectionChange)="cambiaStep($event)"作为属性添加到我的<mat-vertical-stepper>标记中。然后，我必须在所有<ng-container>标记下添加<mat-step>。在每个对应的<ng-container>中，我必须根据步进顺序中的位置设置属性。在每个<ng-container>中，我必须添加*ngIf="stepIndex === 0"，但0基于其在步骤中的顺序（0：首先，1：秒，2：第三等）

我的步进器最终得到了代码：

<mat-vertical-stepper (selectionChange)="cambiaStep($event)">
<mat-step>
    <ng-container *ngIf="stepIndex === 0">

    </ng-container>
</mat-step>
<mat-step>
    <ng-container *ngIf="stepIndex === 1">

    </ng-container>
</mat-step>
<mat-step >
    <ng-container *ngIf="stepIndex === 2">

    </ng-container>
</mat-step>
</mat-vertical-stepper>

我还必须在我的组件的* .ts文件中添加事件功能。

export class LoginDialogComponent {
    stepIndex: number = 0;
    cambiaStep(e) {
        this.stepIndex = e.selectedIndex;
    }

    constructor() {}
}

角度材质 - 折叠步进器的非活动步骤

2 个答案: