Angular:制作 Material 步进器所需的按钮切换组
Angular: Making Button Toggle Group required for Material Stepper
我对 Angular 比较陌生,刚刚开始了解 Material 设计组件以及它们如何工作以及如何相互交互。
我正在构建一个多步 Web 应用程序,因此使用 Material Stepper 似乎合乎逻辑。用户还可以在这些步骤的各种选项之间进行选择,因此我使用按钮切换组来显示这些选项。
我希望能够做的 - 并且想知道这是否可能 - 是使按钮切换组成为步进器的 "required" 字段。在某些情况下,切换组将是步骤中的唯一选项,我想这样做,以便用户在不选择切换组选项的情况下无法进入下一步。
我尝试了一些简单的解决方案,例如将 "required" 添加到 mat-button-toggle 上,如下所示:
<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:
<mat-button-toggle-group required>
但是,不幸的是,事情并没有那么简单,这是我没想到的。但是,嘿,您不妨先从最简单明了的解决方案开始,对吧?
显然,它没有用,我目前对 Angular 的了解并不广泛,尝试各种搜索都没有找到任何有用的东西(and/or 我能理解的任何东西).
到目前为止,这是我的代码:
我的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 }));
}
}
我想我想问的是,这是否可能,我是否在正确的轨道上,如果没有,获得我希望的结果的最佳方法是什么?
如能提供任何帮助,我们将不胜感激。
您可以使用属性 disabled
和动态表达式来禁用 matStepperNext
,防止用户在步进器中向前移动。看起来您的默认值是 'nothing yet'
。例如,您可以通过检查值是否仍然是 default/invalid '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
值禁用按钮。
希望对您有所帮助!
我对 Angular 比较陌生,刚刚开始了解 Material 设计组件以及它们如何工作以及如何相互交互。
我正在构建一个多步 Web 应用程序,因此使用 Material Stepper 似乎合乎逻辑。用户还可以在这些步骤的各种选项之间进行选择,因此我使用按钮切换组来显示这些选项。
我希望能够做的 - 并且想知道这是否可能 - 是使按钮切换组成为步进器的 "required" 字段。在某些情况下,切换组将是步骤中的唯一选项,我想这样做,以便用户在不选择切换组选项的情况下无法进入下一步。
我尝试了一些简单的解决方案,例如将 "required" 添加到 mat-button-toggle 上,如下所示:
<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:
<mat-button-toggle-group required>
但是,不幸的是,事情并没有那么简单,这是我没想到的。但是,嘿,您不妨先从最简单明了的解决方案开始,对吧?
显然,它没有用,我目前对 Angular 的了解并不广泛,尝试各种搜索都没有找到任何有用的东西(and/or 我能理解的任何东西).
到目前为止,这是我的代码:
我的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 }));
}
}
我想我想问的是,这是否可能,我是否在正确的轨道上,如果没有,获得我希望的结果的最佳方法是什么?
如能提供任何帮助,我们将不胜感激。
您可以使用属性 disabled
和动态表达式来禁用 matStepperNext
,防止用户在步进器中向前移动。看起来您的默认值是 'nothing yet'
。例如,您可以通过检查值是否仍然是 default/invalid '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
值禁用按钮。
希望对您有所帮助!