角度:创建材质步进器所需的按钮切换组

Question

我对Angular比较陌生，刚刚开始掌握Material Design组件，以及它们是如何工作的，以及它们如何相互作用。

我正在构建一个多步骤的web应用程序，所以使用Material Stepper似乎是合乎逻辑的。用户还可以在这些步骤的不同选项之间进行选择，所以我使用Button Toggle Group来显示这些选项。

我希望能够做的事情--我想知道这是否可能--是让Button Toggle Group成为stepper的“必填”字段。在某些情况下，切换组将是步骤中的唯一选项，我希望这样用户就不能在没有选择切换组选项的情况下移动到下一步。

我尝试过一些简单的解决方案，比如在垫子按钮切换中添加"required“，如下所示：

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

并放到垫子按钮切换组上：

<mat-button-toggle-group required>

但是，不幸的是，事情并没有那么简单，这是我没有预料到的。但是，嘿，你最好先从最简单和最明显的解决方案开始，对吧？

显然，它不起作用，我对Angular的了解目前还不是很广泛，尝试各种搜索也没有找到任何有用的东西(和/或任何我能理解的东西)。

到目前为止，我的代码如下：

我的component.html：

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

和我的component.ts：

import { Component, OnInit } from '@angular/core';
import { TimeoutError } from 'rxjs';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-customer-portal-step1',
  templateUrl: './customer-portal-step1.component.html',
  styleUrls: ['./customer-portal-step1.component.scss']
})

export class CustomerPortalStepOneComponent implements OnInit {

  isLinear = true;
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;
  thirdFormGroup: FormGroup;

  constructor(private _formBuilder: FormBuilder) { }

  ngOnInit() {
    this.firstFormGroup = this._formBuilder.group({
      firstCtrl: ['', Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      secondCtrl: ['', Validators.required]
    });
    this.thirdFormGroup = this._formBuilder.group({
      secondCtrl: ['', Validators.required]
    });
  }

  selectedStep1Option: string = 'nothing yet';

  step1options = [
    {
      text: 'Buying my first home',
      id: 'buying'
    },
    {
      text: 'Moving to a new home',
      id: 'moving'
    },
    {
      text: 'Remortgaging my home',
      id: 'remortgage'
    },
    {
      text: 'Purchasing a buy-to-let',
      id: 'purchase'
    }
  ];

  status: boolean = false;

  getOptionName (Oname: any) {
    this.selectedStep1Option = Oname.textContent;
    localStorage.setItem('I\'m thinking of:', JSON.stringify({ motivation: Oname.textContent }));
  }

}

我想我想问的是，这是否可能，我是否在正确的轨道上，如果不是，对我来说，获得我所希望的结果的最佳方法是什么？

如果您能提供任何帮助，我们将不胜感激。

Answer 1

可以结合使用属性编辑器( attribute 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值禁用按钮。

希望这能有所帮助！