Question

我在mat-step中有4个mat-vertical-stepper.我要禁用第2个，第3个＆amp;第4个mat-step，直到第1个mat-step所有字段都被覆盖。

我试过了：

<mat-step label="Step 1">
    <!-- some codes-->
</mat-step>

在步骤1中，我有一个下一个按钮，此按钮被禁用，直到覆盖所有字段。

<button mat-raised-button color="primary" style="float:right"
     [disabled]="!DetailsForm.valid" (click)="step2.disabled = false">Next</button>

接下来是第2步：

<mat-step label="Step 2" [disabled]="step2.disabled">

它显示错误＆＃34;禁用不属于mat-step＆＃34;的一部分。

像这样，休息两个mat-step就在那里。我想禁用第2，第3，第4 mat-step。

在下面的情况下，我该如何使用linear？

    <mat-vertical-stepper #stepper>
       <mat-step label="General Details">
           <h4> First Name </h4>
       </mat-step>
       <mat-step label="Education">
           <h4>Highest Education </h4>
       </mat-step>
    </mat-vertical-stepper>

和

   <div class="col-md-9 col-lg-9">
     <form [formGroup]="generalDetailsForm">
       <div class="row">
         <div class="col-md-5 col-lg-5">
           <mat-form-field class="example-full-width">
             <input matInput placeholder="First Name" [(ngModel)]="firstName">
           </mat-form-field>
         </div>
      </div>
    </form>
   </div>

Answer 1

在mat-step中使用[stepControl]="formName"并在.ts中对表单进行验证。

仅使用linear无法获得帮助。我做错了。我没有使用[stepControl]

Answer 2

mat-vertical-stepper没有属性已禁用，因为异常消息显示。

尝试设置<mat-vertical-stepper [linear]="true">

之后，您需要像处理一样处理按钮的可见性。一个按钮具有禁用属性。

Answer 3

第1步：Component.ts

stepDisabled: boolean = true;

第2步：Component.css

::ng-deep .mat-step-header[aria-labelledby="disabled_Resi"] {
  pointer-events: none !important;
  cursor: not-allowed;
}

第3步：Component.html

  <mat-step [aria-labelledby]="stepDisabled ? 'disabled_Resi' : null" [stepControl]="ResidentalAddressFG"></mat-step>

步骤：4

<button mat-stroked-button (click)="stepDisabled = !stepDisabled">{{stepDisabled ? 'Enable' : 'Disable'}} Step</button>

Answer 4

@delpo和@Matvii的解决方案应符合您的需求。

<mat-vertical-stepper #stepper [linear]="true">
 <mat-step
   state="first"
   [completed]="formGroup.valid"
   [editable]="true">
 </mat-step>
 <mat-step state="final">
 </mat-step>
</mat-vertical-stepper>

这可以通过使用 [linear] =“ true” 并通过传递 [validated] =“ formGroup.valid” 来禁用下一步来实现您的FormGroup，因此只要FormGroup有效，则应该启用/应该继续执行下一步。

Answer 5

对于任何看到这个的人。

我使用linear completed属性解决了这个问题。

从文档中

或者，如果您不想使用Angular形式，则可以将完成的属性传递到不允许的每个步骤用户继续操作直到它变为真。请注意，如果两者完成并设置stepControl时，stepControl将采取优先。

https://material.angular.io/components/stepper/overview

Answer 6

如果要禁用第2步，则应在第1步上使用[completed]，同时将[stepControl]设置为null，因为[stepControl]优先于[completed]

 <mat-horizontal-stepper #stepper [linear]="true">
   <!-- step1 -->
   <mat-step
     [stepControl]="shouldNextStepBeDisabled ? null : formGroup"
     [completed]="shouldNextStepBeDisabled ? false : formGroup.valid">
   </mat-step>
   ....
 </mat-horizontal-stepper>

Answer 7

<mat-horizontal-stepper #stepper [linear]="true">
<mat-step [completed]="false">
   <!-- set completed = false to disable next step -->
</mat-step>
<mat-step>
   this step would be disable         
</mat-step>
</mat-horizontal-stepper>

Answer 8

我必须根据条件禁用步骤。
我创建了一条指令并查询dom以添加一个类。

样式表：

.mat-step-disabled {
  pointer-events: none;
  opacity: 0.5;
  color: #cccccc;
}

指令

@Directive({
  selector: '[step-disable]'
})
export class StepDisableDirective implements OnChanges {
  @Input() public isDisabled: boolean = true;

 public ngOnChanges(changes: SimpleChanges): void {
   this.isDisabled? this.disable() : this.enable();
 }
   
  private enable(): void {
    const el:HTMLElement  = this.getElement();
    el.classList.add('mat-step-disabled');
  }

  private disable(): void {
    const el:HTMLElement  = this.getElement();
    el.classList.remove('mat-step-disabled');
  }

  private getElement(): HTMLElement {
    const elements: HTMLCollectionOf<Element> = document.getElementsByClassName(mat-step-header);
    const matStepHeader = elements[0] as HTMLElement;    // Take the first step, you want to pass your index via an Input parameter
    return matStepHeader;
  }    
}

模块

@NgModule({
  declarations: [
    StepDisableDirective 
  ]
})
export class AppModule{ }

HTML
设置指令及其输入参数

<mat-step step-disable [isDisabled]="true" label="Foo">

Answer 9

使用@Hypenate的答案，我只是想迫使用户停留在当前步骤，而formGroup（仅限于当前步骤）为无效。

所以我在styles.css中定义了CSS：

.mat-element-notclickable{
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
    color: #cccccc;
}

与 ngOnInit 相比，我只订阅了formGroup的statusChange并根据需要禁用了所有步骤：

    ngOnInit() {
        this.formGroup.statusChanges.subscribe( newStatus => {
            if( newStatus === 'VALID') {
                Array.from(document.getElementsByClassName('mat-step-header')).forEach(element => {
                    element.classList.remove('mat-element-notclickable')
                });
            } else {
                Array.from(document.getElementsByClassName('mat-step-header')).forEach(element => {
                    element.classList.add('mat-element-notclickable')
                })
            }
        })
    }

（当然，您可以只使用标头容器，并且仅使用一个.classList.add和remove，但是在其他地方，我将需要分别启用/禁用步骤）

Answer 10

添加属性class =“ mat-elevation-z1”对我有用

在mat-vertical-stepper中禁用mat-step

10 个答案: