在angular13中的任何輸入字段上按下回車鍵時如何避免更改ng bootstrap下拉菜單

Question

我正在使用角度供電的引導下拉菜單，每當我在輸入中輸入按鍵時，它總是將下拉值更改為第一個選項。

演示鏈接

HTML：

<div class="row mb-3 mt-3">
          <div class="col">
            <div ngbDropdown class="d-inline-block">
              <button
                type="button"
                class="btn btn-outline-primary"
                id="dropdownBasic1"
                ngbDropdownToggle
              >
                {{ clickMessage }}
              </button>
              <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
                <button
                  ngbDropdownItem
                  class="nav-link"
                  href="#"
                  (click)="getText($event.target.innerText)"
                >
                  Option 1
                </button>
                <button
                  ngbDropdownItem
                  class="nav-link"
                  href="#"
                  (click)="getText($event.target.innerText)"
                >
                  Option 2
                </button>
                <button
                  ngbDropdownItem
                  class="nav-link"
                  href="#"
                  (click)="getText($event.target.innerText)"
                >
                  Option 3
                </button>
              </div>
            </div>
          </div>
        </div>

TS：

  clickMessage = 'Choose an option';

  getText(text) {
    this.clickMessage = text;
  }

Answer 1

將以下代碼添加到您的 ts 文件中。

  @HostListener('keydown', ['$event']) public onKeyDown(evt) {
    if (evt.key === 'Enter') {
      evt.preventDefault();
      this.onSubmit();
    }
  }

我在下面的 stackblitz 中為你寫了它。

https://stackblitz.com/edit/angular12-bootstrap-skiant?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts

Answer 2

您看到的行為是由於您有一些沒有任何類型屬性的按鈕，並且默認情況下表單中的按鈕會觸發提交事件。將類型添加到下拉列表中的按鈕，它應該可以工作。

<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
    <button
        type="button"
        ngbDropdownItem
        class="nav-link"
        href="#"
        (click)="getText($event, $event.target.innerText)"
    >
        Option 1
    </button>
    <button
        type="button"
        ngbDropdownItem
        class="nav-link"
        href="#"
        (click)="getText($event, $event.target.innerText)"
    >
        Option 2
    </button>
    <button
        ngbDropdownItem
        class="nav-link"
        href="#"
        (click)="getText($event, $event.target.innerText)"
    >
        Option 3
    </button>
</div>