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

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>

在我的typescript中，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

在查看了给定的详细信息之后，您在提供的code.You中遗漏了matStepperNext。如上所述，通过步进器索引，您可以根据特定组件的有效状态来控制步进器是否继续前进

有了给定的细节，我假设这将解决这个问题，如果不能，你能提供更多的细节，如果可用的话git url。

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

Answer 2

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

以下是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

访问它

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

根据true和false，分别更改this.stepper.selectedIndex的值。