Primeng : 모델 구동 형 그룹의 키보드로 드롭 다운 값을 선택하십시오

Question

에 formControlName이 Primeng의 드롭 다운에 붙어 있습니다. 키보드로 드롭 다운에서 옵션을 선택하려고 할 때 완벽하게 작동합니다.

경우 몇 필요한 formGroup이 유효하지 않습니다 사용할 수있는 버튼이 드롭 다운 : 나는 키보드로 드롭 다운 선택에서 값을 선택하는 경우이 버튼은 활성화되지 않습니다

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

. 내 페이지에서 탭 키를 사용하여 드롭 다운 요소에 초점을 맞추고 화살표 키를 사용하여 값을 선택했습니다. 선택한 값은 드롭 다운에 표시되지만 드롭 다운에 해당하는 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])] 
     }) 
    }