Question

我是Angular的新手，只是开始接触Material Design组件以及它们如何工作以及如何相互影响。

我正在构建一个多步骤Web应用程序，因此使用Material Stepper似乎合乎逻辑。用户还可以在这些步骤的各个选项之间进行选择，因此我已经使用“按钮切换组”来显示这些选项。

我想做的-并且想知道是否有可能-是将按钮切换组设为步进器的“必填”字段。在某些情况下，切换组将是该步骤的唯一选项，而我想这样做，以便用户在未选择“切换组”选项的情况下无法进行下一步。

我尝试了一些简单的解决方案，例如在mat-button-toggle上添加“ required”，例如：

String json = "{\"id\" : 100 , \"cmd\" : 255}";

然后进入mat-button-toggle-group：

<mat-button-toggle (click)="getOptionName(Oname);" class="btn btn-primary step-button" id="{{step1option.id}}" [ngClass]="status ? 'selected' : ''" required><span #Oname>{{step1option.text}}</span></mat-button-toggle>

但是，不幸的是，事情并非如此简单，我没想到会如此。但是，您最好先从最简单，最明显的解决方案入手，对吧？

很显然，它没有用，并且我对Angular的了解目前还不广泛，尝试进行各种搜索都没有发现任何有用的东西（和/或我能理解的任何东西）。

到目前为止，这是我的代码：

我的component.html：

<mat-button-toggle-group required>

还有我的component.ts：

<mat-horizontal-stepper [linear]="isLinear" #stepper>
    <mat-step label="Step 1" [stepControl]="firstFormGroup">

        <form [formGroup]="firstFormGroup">

        <div ng-controller="step1">

            <h2>I'm thinking of...</h2>

            <mat-button-toggle-group>
              <div *ngFor="let step1option of step1options">
                <mat-button-toggle (click)="getOptionName(Oname);" class="btn btn-primary step-button" id="{{step1option.id}}" [ngClass]="status ? 'selected' : ''"><span #Oname>{{step1option.text}}</span></mat-button-toggle>
              </div>
              </mat-button-toggle-group>

            <div>You chose <strong>{{ selectedStep1Option }}!</strong></div>

            <button mat-stroked-button matStepperNext class="btn btn-secondary continue-btn">Continue</button>

         </div>

          </form>

        </mat-step>

        <mat-step label="Step 2" [stepControl]="secondFormGroup">
            <form [formGroup]="secondFormGroup">
              <p>Test</p>
            </form>
        </mat-step>

        <mat-step label="Step 3" [stepControl]="thirdFormGroup">
            <form [formGroup]="thirdFormGroup">
              <p>Test</p>
            </form>
        </mat-step>

</mat-horizontal-stepper>

我想我要问的是，这是否有可能，是否在正确的轨道上？如果没有，对我来说，获得期望的最佳方法是什么？

您能提供的任何帮助将不胜感激。

Answer 1

您可以将属性disabled与动态表达式一起使用来禁用matStepperNext，以防止用户在步进器中前进。看起来您的默认值为'nothing yet'。您可以例如通过检查该值是否仍为默认/无效的'nothing yet'来禁用按钮：

<mat-button-toggle-group>
  <div *ngFor="let step1option of step1options">
    <mat-button-toggle (click)="getOptionName(Oname);" class="btn btn-primary step-button" id="{{step1option.id}}" [ngClass]="status ? 'selected' : ''"><span #Oname>{{step1option.text}}</span></mat-button-toggle>
  </div>
</mat-button-toggle-group>

<div>You chose <strong>{{ selectedStep1Option }}!</strong></div>

<button mat-stroked-button matStepperNext class="btn btn-secondary continue-btn" [disabled]="selectedStep1Option === 'nothing yet'">Continue</button>

这是一个example的动作，显示根据mat-button-toggle-group值禁用按钮。

希望有帮助！

角度：材料步进器需要设置按钮切换组

1 个答案: