标签: angular-material-stepper

我使用的是matStepper，当我将selectedIndex设置为3时，无法使用下一个和上一个导航。我可以单击水平步进器中的（1），然后照常使用下一个/上一个。所有表格均有效，单击（1）后，我可以使用1-7的下一个导航。

注意我有this.selectedIndex = 3; 硬编码

<mat-horizontal-stepper #stepper
                        [linear]="true"
                        [selectedIndex]="this.selectedIndex"
                        (selectionChange)="selectionChange(stepper)">

  <mat-step [stepControl]="form1">
    <app-observer-information></app-observer-information>
  </mat-step>
...
  <mat-step [stepControl]="form7">
    <app-observer-agreement></app-observer-agreement>
  </mat-step>

</mat-horizontal-stepper>



export class ObservationStatementStepperComponent implements OnInit {

  @ViewChild('ObserverInformationComponent') public component1: ObserverInformationComponent;
  ..
  @ViewChild('ObserverAgreementComponent') public component7: ObserverAgreementComponent;

  public selectedIndex: number;

  constructor(private sorDataService: SorDataService) {

    this.selectedIndex = 3; // Number(sorDataService.selectedIndex);
  }

  public ngOnInit() {
  }

  public selectionChange(stepper) {

    this.sorDataService.synchronizeStepper(stepper.selectedIndex + 1);
  }

  /**
   * @see /sf/ask/3394927651/
   */
  get form1() {
    return this.component1 ? this.component1.form : null;
  }
  ...
  get form7() {
    return this.component7 …

我的Angular应用程序中有一个页面，它使用stepper. 例如，当用户处于第 3 步时，他要返回到上一步（第 2 步）要做的第一个合乎逻辑的事情是单击back button。但显然，他会被重定向到上一页。

因此，我可以在stepper后退单击时将其设置为上一页，而不是将用户重定向到最后一页，并且当用户处于步骤 1时将他重定向到最后一页。

我试图@HostListener通过强制转换this.stepper.previous();（将步进器设置为上一个的函数）来使用，但是当操作是时，catched该函数不会执行，并且页面无论如何都会重定向回来。

那么如何防止页面在单击后退按钮时重定向？

这是我尝试过的：

@HostListener( 'window: popstate', ['$event'])
onPopState(event: Event): void {
  event.preventDefault();
  console.log("BACK PRESSED")
  this.stepper.previous();
}

有什么方法可以将[stepControl]错误匹配器与模板驱动的表单一起使用？这些文档只是讲授了一个AbstractControl实例，该实例显然强制使用了reactForm。

我试图使用[stepControl]="myNgForm"并[linear]="true"验证步骤，但步进器只是忽略了它。

感谢您的帮助。

谢谢！

如何从 Angular 材料步进器中删除数字？

我不想用图标替换它们，我希望有一个空圆圈。

编辑：我正在使用 Angular 9

我正在使用线性垫步进器。

它与 next 一起工作正常。我进行 api 调用，如果成功，则调用 stepper-next 事件而不是使用 matStepperNext 指令。

现在，当用户在步骤 1 中填写所有数据并直接单击下一步（或编辑记录模式下的任何其他）标题中的其他步骤时，由于表单有效，它将重定向到下一步。

我想在此之前进行服务调用并在服务调用成功之前防止步进更改，然后才应该重定向到下一步，否则不应该。

我在文档中找不到任何方法来实现此功能。

任何人都可以建议我该怎么做。我不想禁用标题单击。

我有一个 mat-horizontal-stepper哪里将线性属性设置为true。到目前为止，当所有步骤都有效时，我可以通过单击标题或标签来导航到先前的步骤。我不要那个财产

我只需要通过按钮导航。

我尝试使用以下方式禁用指针功能：

    .mat-horizontal-stepper-header{
       pointer-events: none;
     }

但是没有用。

我需要通过单击标题停止导航，或者在单击步进标题时触发功能。

在 Angular 中，是否可以有一个线性步进器，其中各个步骤是单独的组件？例如：

<mat-horizontal-stepper [linear]="isLinear">
    <mat-step [stepControl]="firstFormGroup" label="Some Form">
        <first-component></first-component>
    </mat-step>
    <mat-step [stepControl]="secondFormGroup" label="Another Form">
        <second-component></second-component>
    </mat-step>
    <mat-step [stepControl]="thirdFormGroup" label="Review">
        <third-component></third-component>
    </mat-step>
</mat-horizontal-stepper>

当我尝试这个时，我在点击matStepperNext按钮时收到以下错误：

TypeError: Cannot read property 'invalid' of undefined.

如何在角材料的步进器中提交表单数据。我正在遵循角度材料https://material.angular.io/components/stepper/examples中的示例。在问这个问题之前我做了很多谷歌搜索，但没有找到任何答案。

<mat-horizontal-stepper [linear]="isLinear" #stepper="matHorizontalStepper">
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field>
        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Fill out your address</ng-template>
      <mat-form-field>
        <input matInput placeholder="Address" formControlName="secondCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

我已经填写完两份表格了。但之后我不知道如何获取/提交表单数据。

谢谢你的帮助... ：-）

这是我的表单组。我在另一个表单组中使用表单组：

this.shopGroup = this.fb.group({
  _user: [''],
  name: ['', Validators.compose([Validators.required, Validators.maxLength(60)])],
  url_name: [''],
  desc: ['', Validators.compose([Validators.required, Validators.maxLength(600)])],
  photos: [''],
  currency: ['Real'],
  language: ['Português do Brasil'],
  address: this.fb.group({
    zipcode: ['', Validators.compose([Validators.required, Validators.pattern('[0-9]{5}[\-]?[0-9]{3}')])],
    street: ['', Validators.compose([Validators.required, Validators.maxLength(70)])],
    number: [null, Validators.compose([Validators.required, Validators.max(99999)])],
    complement: ['', Validators.maxLength(30)],
    district: ['', Validators.compose([Validators.required, Validators.maxLength(60)])],
    state: ['', Validators.required],
    city: ['', Validators.compose([Validators.required, Validators.maxLength(70)])]
  }),
  status: [true],
  created_at: [new Date()],
  updated_at: [new Date()]
});

这是模板：

<form [formGroup]="shopGroup">
  <mat-horizontal-stepper [linear]="isLinear" #stepper>
    // Im not sure how to set stepControl
    <mat-step [stepControl]="?">
        <ng-template matStepLabel>Store …

我正在我的mat-horizontal-stepper一个组件中实现 a并且我试图让错误状态显示在一个步骤上，如果我在[completed]属性存在时从它移开，但这并false没有发生。

我不确定使用该completed物业或类似的东西是否有一些限制；这是我到目前为止：

组件的 HTML

<mat-horizontal-stepper linear #auditStepper>
     <mat-step label="Choose a Company" [completed]="selectionClient.selected.length > 0">
     </mat-step>

     <mat-step label="Select a PPC Account" errorMessage="Select an Account" [completed]="selectionPPC.selected.length > 0">
     </mat-step>

     <mat-step label="Set Your Targets">  
     </mat-step>
</mat-horizontal-stepper>

组件的 TS

@Component({
  selector: 'app-new-audit',
  templateUrl: './new-audit.component.html',
  styleUrls: ['./new-audit.component.scss'],
  providers: [
    {
      provide:  STEPPER_GLOBAL_OPTIONS,
      useValue: { showError: true }
    }
  ]
})

在上面的代码中，我只提供了重要的东西；但是如果我正确地遵循了 Angular Material 文档，我需要做的是将它添加providers到组件（或我的主应用程序模块）中，仅此而已？

因此，例如，如果我进入第 2 步但保持completed条件为假，然后移至另一个步骤，则应触发错误，因为该步骤不再处于活动状态但也未完成。

我只是想了解一切是如何工作的，因为我没有为这个步进器使用反应形式或任何形式，因为我正在使用 MatTable；我只需要用户从表中选择一行（通过 MatTable 的选择功能），如果选择数组有一个元素，那么我可以将该步骤视为“完成”并允许移动到下一步。

Stackblitz …