在 mat-step 内的 Mat-Input 中允许空格（键）

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 中输入单词不接受空格输入（空格键按键）。

任何建议如何在 mat-steps 内的 mat-input 中允许空格键？

---

我在文档中看到过这个，有没有办法绕过 SPACE 事件默认值？

键盘交互

• LEFT_ARROW：聚焦上一步标题
• RIGHT_ARROW：聚焦下一步标题
• ENTER、SPACE：选择当前焦点所在的步骤
• TAB：聚焦下一个可选项卡元素
• TAB+SHIFT：聚焦上一个可选项卡元素

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

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

Answer 1

我似乎mat-step标头的键盘交互传播到matInput，我最终在matInput的keydown事件上使用了$event.stopPropagation()。

这是堆栈闪电战：

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

示例图像：

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