Question

我正在使用具有多个步骤的垂直垫板步进器。我从谷歌搜索。不幸的是，我无法得到它。

我的要求是，除第一步之外，所有其他步骤均应处于禁用模式。我可以通过使用线性属性来实现。一旦完成第一步，我就需要打开第二步，第一步也应该处于启用模式。不适用于禁用模式。同样，它应该适用于所有步骤。

Answer 1

我已经通过适当的验证而实现。 mat-vertical-stepper将在验证器的帮助下工作。除非当前步骤验证成功，否则将不会进行下一步。

示例：

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

firstFormGroup出现故障意味着将无法继续进行下一步

Answer 2

var realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2];

var squareList = function squareList(arr) {
  "use strict";

  var squaredIntegers = arr.filter(function (num) {
    return Number.isInteger(num) && num > 0;
  });
  return squaredIntegers;
};

var squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers);

TS文件

Try This 

home.component.ts

<button mat-raised-button (click)="isEditable = !isEditable">
  {{!isEditable ? 'Enable edit mode' : 'Disable edit mode'}}
</button>

<mat-vertical-stepper linear #stepper>
  <mat-step [stepControl]="firstFormGroup" [editable]="isEditable">
    <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" [editable]="isEditable">
    <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-vertica-stepper>

工作示例DEMO

mat-vertical-stepper无法按预期方式工作

2 个答案: