Разрешить пробел (ключ) в Mat-Input внутри mat-step

Question

Я добавил входные данные в шаблон mat-step, чтобы пользователь мог добавить заголовок.

<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: фокусирует заголовок следующего шага
• ENTER, SPACE: выбирает шаг, на котором в данный момент находится фокус
• TAB: фокусируетследующий элемент с вкладками
• TAB + SHIFT: фокусирует предыдущий элемент с вкладками

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

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

Answer 1

Мне кажется, что взаимодействие с клавиатурой заголовка шага mat распространяется на matInput, в итоге я использовал $ event.stopPropagation () при событии keydown события matInput.

Вот блик стека:

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

образец изображения:

Надеюсь, что это может быть полезно для других.

Answer 2

Похоже, проблема в том, что поле ввода находится внутри ng-шаблона.

См. Этот пример:

 <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-шаблона.