1

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

有谁知道问题出在哪里？

4

3 回答 3

0

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

这是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'应该与#stepperHTML 文件中的标识符相同。
  • {static: false|true}仅 Angular 8 需要第二个参数。
  • 现在您可以使用this.stepper
于 2020-03-03T22:16:30.160 回答
0

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

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

<button mat-raised-button matStepperNext color="accent" (click)="checkValidation()">Next</button>
于 2018-04-03T16:50:59.920 回答
-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;
}

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

于 2018-04-03T13:21:23.767 回答