Question

我已经在mat-step的模板中添加了mat-input，以便用户可以添加标题。

<mat-horizontal-stepper>
    <mat-step *ngFor="let group of apprGrpList; let i = index"
        [label]="group.group_Name | capitalize"  
        [editable]="isEditable" >
        <ng-template matStepLabel>
                <mat-form-field class="sf-form-width">
                        <input class="sf-form-input"
                            matInput #title maxlength="30"
                            placeholder="Aprroval Step Title"
                            autocomplete="off">
                        <mat-hint *ngIf="title.value" 
                            align="end">{{title.value.length}} / 30</mat-hint>
                        <button mat-button *ngIf="title.value" 
                            matSuffix mat-icon-button aria-label="Clear" 
                            (click)="title.value=''">
                            <mat-icon>close</mat-icon>
                        </button>
                        <button mat-button *ngIf="title.value" 
                            matSuffix mat-icon-button aria-label="Set" 
                            (click)="setTitle(group.sequence, title.value)">
                            <mat-icon>check</mat-icon>
                        </button>                            
                </mat-form-field>  
        </ng-template>
...

下面是我所取得的成就的示例记录。

一切正常，直到在mat-input中输入单词不接受空格输入（空格键）。

任何建议如何在垫脚步内的垫脚输入中允许使用空格键？

我已经在文档中看到了这一点，有没有办法传递SPACE事件默认值？

键盘交互

LEFT_ARROW：聚焦上一步标题
RIGHT_ARROW：聚焦下一步标题
输入，空格：选择当前焦点所在的步骤
TAB：聚焦下一个可Tabable元素
TAB + SHIFT：聚焦上一个可Tabable元素

https://material.angular.io/components/stepper/overview

https://stackblitz.com/edit/angular-9hm4bv

Answer 1

我似乎垫步标头的键盘交互传播到了matInput，我最终在matInput的keydown事件上使用了$ event.stopPropagation（）。

这是堆叠闪电战：

https://stackblitz.com/edit/angular-9hm4bv

示例图片：

希望这可能对其他人有帮助。

Answer 2

问题似乎出在ng-template内。

请参见以下示例：

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

如果您删除输入并使其成为ng-template的兄弟，它将开始按预期工作。

在垫子步内的垫子输入中留出空间（键）

2 个答案: