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

Question

我的应用中有一个 matStepper，它的前 2 个步骤如下所示：

     <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”被一些设置为真或假的方法修改。 但是，即使是真的，我也无法进行下一步。在第一步中，我只有一个输入，它运行良好，一旦字段被填满，我就可以进入下一步。

有谁知道问题出在哪里？

Answer 1

查看给定的详细信息后，您在提供的代码中缺少 ma​​tStepperNext。您可以通过如上所述的步进器索引根据特定组件的有效状态控制步进器继续或不继续以上

有了给定的详细信息，我假设这将解决此问题，如果不能提供更多详细信息，请提供 git url（如果有）。

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

Answer 2

虽然这不是问题的直接答案，但我认为它可能对其他人有所帮助。

这是Ahmed Jahanzaib答案的补充

为了在组件中访问MatHorizo​​ntalStepper，你需要添加#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 相同。
• 仅 Angular 8 需要第二个参数 {static: false|true}。
• 现在您可以使用this.stepper 访问它

Answer 3

您需要像这样包装您的 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;
}

根据真假，分别改变this.stepper.selectedIndex的值。