Отключить клавишу ввода при выборе значения в angular mat-select

Question

У меня есть форма, которая слушает enter ключ для подтверждения

Но при добавлении получаю нежелательное поведение.

Когда я нажимаю клавишу ВВОД, чтобы выбрать значение в mat-option list Он также запускает проверку формы и отправляет данные.

      <mat-select (keydown.enter)="enterItem($event)" autoFocus [appAutoFocus]="index===0 ? true: null"
    [formControl]="parameterFormControl"
    (selectionChange)="onChangeParameterChanged($event.source.value)">
  <mat-option tabindex="-1"></mat-option>
  <mat-option tabindex="-1" *ngFor="let val of values" [value]="val">{{val}}
  </mat-option>
</mat-select>

Вот как я слушаю ввод ключа для проверки формы (в родительском компоненте):

      ngOnInit(): void {
  if (event.key === "Enter") {
    event.stopPropagation();
    if (!this.loading && !this.parametersForm.invalid && !this.parametersForm.pristine && this.projectEditable && this.formChanged) {
      setTimeout(() => {
        this.saveAll();
      }, 300);
    }
  }
}

Как отключить ввод на mat-select? Для информации, проверка формы с использованием ключа ввода должна продолжать работать.

Answer 1

Наверное, это так .

TL; DR: добавить type="button"к вашей кнопке отправки. Это поведение HTML по умолчанию, появившееся несколько десятилетий назад, клавиша ввода запускает кнопку отправки в форме. Это сбивает с толку, но это часть стандарта HTML.