标签: angular-material-stepper

我想使用角度材料步进器，但在进行第二步之前我需要进行一些异步服务调用。我怎样才能做到这一点？我可以向下一个按钮添加一个点击处理程序，但这不会等待异步调用返回并继续进行。这是一个plnkr。

在 html 模板中，我会有按钮：

  <button mat-button matStepperNext (click)="onNext()">Next</button>

在组件中：

  onNext() {
     let promise = service.validateData()
  }

有没有办法使用已完成的步骤属性？

我正在使用 Angular Material 步进器。使用 STEPPER_GLOBAL_OPTIONS，我可以像这样更改步骤的状态：

  <mat-step [stepControl]="secondFormGroup" optional state="phone">
  </mat-step>

但是，如何访问这些图标的列表？或者，有没有办法使用我自己的？

我有一个材料步进器，步进器的每个步骤都有表格。在那里，每个步骤都应该由与其关联的表单控制。

尽管这个问题已经在 SO 中提出，但这些问题的答案并不能解决我的问题。因此我才问。

父 HTML

<mat-horizontal-stepper linear #stepper>
    <mat-step [stepControl]="frmStepOne">
        <ng-template matStepLabel>Step One Details</ng-template>
        <app-first-step #stepOne></app-first-step>
    </mat-step>
    <mat-step [stepControl]="frmStepTwo">
        <ng-template matStepLabel>Step Two Details</ng-template>
        <app-second-step #stepTwo></app-second-step>
    </mat-step>
</mat-horizontal-stepper> 

在我的父组件中，我有以下内容。

@ViewChild('stepOne') stepOneComponent: FirstStepComponent;
@ViewChild('stepTwo') stepTwoComponent: SecondStepComponent;


get frmStepOne() {
    return this.stepOneComponent ? this.stepOneComponent.frmStepOne : null;
}

get frmStepTwo() {
    return this.stepTwoComponent ? this.stepTwoComponent.frmStepTwo : null;
}

我的孩子类组件

frmStepOne: FormGroup;

constructor(private formBuilder: FormBuilder) {

    this.frmStepOne = this.formBuilder.group({
      name: ['', Validators.required]
    });
}

子类 HTML

<mat-card>

  <form [formGroup]="frmStepOne">

    <mat-form-field>
      <input matInput formControlName="name" matInput …

我正在使用Angular Material Stepper组件。

在我的内容中，我有单独的按钮，当当前步骤中的任务完成时，这些按钮可以帮助用户移至下一步。

我想防止用户通过单击步进器组件的步骤按钮来访问下一步。

但是，我希望用户能够通过步进器组件的步进按钮返回上一步。

我不在步进器内使用表格。我已经看到了组件的Linear属性，但是它不符合我的要求。

简而言之，通过单击步进器组件的步骤按钮来防止用户进入“未访问”的步骤。

我使用垂直材料步进器，我想默认打开第二个项目。现在它打开第一个项目。我想默认打开“填写您的地址”。为此，我使用了 Material Angular。因此，当我打开应用程序时，我想打开第二个项目并更改图标颜色。我附上了代码。我将不胜感激任何帮助。

html：

<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
  {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
</button>
<mat-vertical-stepper [linear]="isLinear" #stepper>
  <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 …

我在 Angular 中遇到了这个恼人的问题：我通过添加到provides页面的 来覆盖步进器图标：

provide: STEPPER_GLOBAL_OPTIONS, useValue: {displayDefaultIndicatorType: false, showError: true}

这是 HTML 页面（只是一部分，有 7 个元素复制/粘贴）：

<mat-horizontal-stepper>

  <!-- AREA -->
  <mat-step label="Step 1" state="area">
    <p>Put down your phones</p>
    <div>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>

  <!-- QUESTION -->
  <mat-step label="Step 2" state="question">
    <p>Socialize with each other</p>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>

  <!-- MODE -->
  <mat-step label="Step 3" state="mode">
    <p>Socialize with each other</p>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>

...

<!-- Icon overrides …

我一直在为我的一个网页开发步进器元素，并尝试实现该.reset()功能，以便使用材料设计文档 ( https://material.angular.io/components/)将表单恢复为空白状态步进器/概述)

按照多表单组示例，我可以看到 .reset 通过让您回到第一步并清除表单来正常工作。但是，在尝试使用单一表单结构时，我发现这stepper.reset()会让您回到第一步，但并没有清除表单。

我尝试标记重置按钮，Type="button"因为单个表单需要在“下一步”和“后退”按钮上进行标记，以防止单击按钮时提交表单，但没有看到任何更改。

我希望在单击重置时发生这两个操作，但我不确定是否必须编写手动重置功能，或者我的代码中是否有错误。

对此的任何帮助将不胜感激。谢谢！

创建.component.html

<form [formGroup]="formGroup" class="content-container" (ngSubmit)="onSubmit()">
  <h1>{{title}}</h1>
  <mat-vertical-stepper #stepper>
    <mat-step formGroupName="someFieldGroup" [stepControl]="someFieldGroup">
      <ng-template matStepLabel>Fill out Field</ng-template>
      <mat-form-field>
        <input matInput placeholder="Some Field" formControlName="someFieldCtrl" name="someFieldName" required>
        <mat-error>This field is required</mat-error>
      </mat-form-field>
      <div>
        <button type="button" mat-button matStepperNext>Next</button>
      </div>
    </mat-step>
    <mat-step formGroupName="anotherFieldGroup" [stepControl]="anotherFieldGroup">
      <ng-template matStepLabel>Fill out Field</ng-template>
      <mat-form-field>
        <input matInput placeholder="Another Field" formControlName="anotherFieldCtrl" name="anotherFieldName" required>
        <mat-error>This field is required</mat-error>
      </mat-form-field>
      <div>
        <button type="button" mat-button matStepperPrevious>Back</button>
        <button type="button" …