Question

我在我的应用程序中有一个matStepper，它有两个第一步，如下所示：

     <mat-step [stepControl]="actionFormGroup">...</mat-step>
     <mat-step [stepControl]="flightsFormGroup">
        <form [formGroup]="flightsFormGroup">
          <ng-template matStepLabel>Title</ng-template>
          <div class="central" fxLayoutGap="20px">
            <app-list-flights></app-list-flights>
            <div dir="rtl">
              <button mat-raised-button color="accent" (click)="checkValidation()">Next</button>
            </div>
          </div>
        </form>
      </mat-step>
<mat-step>...</mat-step>

在我的打字稿中，FormGroup声明是这样的：

export class NewReqComponent implements OnInit {

      actionFormGroup: FormGroup;
      flightsFormGroup: FormGroup;
      ngOnInit() {
        this.actionFormGroup = this._formBuilder.group({
          ctrl: ['', Validators.required]
        });
        this.flightsFormGroup = this._formBuilder.group({
          ctrl: [false, Validators.requiredTrue]
        });
      }
 }

我的表单控件“ctrl”被一些设置为true或false的方法修改。然而，即使这是真的，我也不能进入下一步。在第一步中，我只有一个输入，它运行良好，只要字段填满，我就可以进入下一步。

有谁知道问题的来源？

Answer 1

你需要像这样包装Mat Stepper html：

<mat-horizontal-stepper [selectedIndex]="selectedIndexVal" (selectionChange)="doSomething($event)">
<mat-step [stepControl]="actionFormGroup">...</mat-step>
     <mat-step [stepControl]="flightsFormGroup">
        <form [formGroup]="flightsFormGroup">
          <ng-template matStepLabel>Title</ng-template>
          <div class="central" fxLayoutGap="20px">
            <app-list-flights></app-list-flights>
            <div dir="rtl">
              <button mat-raised-button color="accent" (click)="checkValidation()">Next</button>
            </div>
          </div>
        </form>
      </mat-step>
<mat-step>...</mat-step>
</mat-horizontal-stepper>

在您的组件类中，像这样制作doSomething()：

public doSomething(event: StepperSelectionEvent) {
   this.stepper.selectedIndex= index;
}

基于true和false，分别更改this.stepper.selectedIndex值。

Answer 2

在查看给定的详细信息后，您在提供的代码中缺少 matStepperNext 。您可以通过步进索引控制步进器继续或不继续，具体取决于特定组件的有效状态上述

根据给定的详细信息，我假设这将解决此问题，如果没有，您是否可以提供更多详细信息，git url（如果可用）。

<button mat-raised-button matStepperNext color="accent" (click)="checkValidation()">Next</button>

Answer 3

尽管这不是我想对其他人有帮助的问题的直接答案。

这里是Ahmed Jahanzaib答案的补充

为了访问组件中的MatHorizontalStepper，您需要添加#stepper标识符（可以设置任何您喜欢的名称）

<mat-horizontal-stepper ... #stepper>
  ...
</mat-horizontal-stepper>

然后在组件类内部，需要注入MatStepper

import { MatStepper } from '@angular/material';
...
export class NewReqComponent implements OnInit {
  @ViewChild('stepper', { static: false }) stepper: MatStepper;

第一个参数'stepper'应该与HTML文件中的标识符#stepper相同。
第二个参数{static: false|true}仅对于Angular 8是必需的。
现在您可以使用this.stepper

Angular 2+：Mat Stepper stepcontrol绑定不起作用

3 个答案: