Primeng：在模型驅動的表單組中使用鍵盤選擇下拉值

Question

我有一個formGroup，附帶一個formControlName在Primeng的下拉列表中，當我嘗試使用鍵盤在下拉列表中選擇一個選項時，所有作品都完美地免除。

如果夫婦需要此下拉菜單，而formGroup無效被禁用的按鈕：

<button pButton type="button" [label]="'Login'" [disabled]="!formGroup.valid"></button> 

如果我選擇在下拉列表中選擇使用鍵盤的值這個按鈕永遠不會被激活。 在我的頁面中，我使用Tab鍵將下拉元素聚焦，並使用箭頭鍵選擇一個值。所選值顯示在下拉列表中，但formGroup.value對應的下拉列表仍然爲空...

我不明白爲什麼以及如何解決該問題。

Answer 1

試試這個它的工作使用鍵盤上下箭頭基礎上下拉值：

component.html

<form [formGroup]="loginForm" novalidate> 
    <div class="form-group"> 
     <label for="email">Select</label> 
     <select class="form-control" name="list_dropdown" id="list_dropdown" formControlName="list_dropdown"> 
      <option value="" >Select...</option> 
      <option value="list1">list1</option> 
      <option value="list2">list2</option> 
      <option value="list3">list3</option> 
     </select> 
    </div> 
    <button pButton type="button" [disabled]="!loginForm.valid" label="Login"></button> 
</form> 

component.ts

loginForm: FormGroup; 
    constructor(private formBuilder: FormBuilder) { 
     this.loginForm = this.formBuilder.group({ 
      list_dropdown: [null, Validators.compose([Validators.required])] 
     }) 
    }