Primeng: Sélectionnez la valeur déroulante avec le clavier dans le groupe de formulaire modèle

Question

J'ai un formGroup avec un formControlName attaché sur une liste déroulante de Primeng, tous les travaux parfaitement sauf lorsque j'essaie de sélectionner une option dans le dropdow avec le clavier.

Si vous couplez un nécessaire ce menu déroulant à un bouton qui est désactivé alors que le formGroup n'est pas valide:

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

Ce bouton ne devient actif que si je sélectionne une valeur dans la sélection de menu déroulant avec le clavier. Dans ma page, je fais la mise au point de l'élément déroulant avec la touche de tabulation, et j'ai choisi une valeur en utilisant les touches fléchées. La valeur sélectionnée est affichée dans la liste déroulante mais le formGroup.value correspondant à la liste déroulante encore vide ...

Je ne comprends pas pourquoi et comment je peux résoudre ce problème.

Answer 1

Essayez ceci Il fonctionne en utilisant le clavier et flèche vers le bas en fonction de la valeur de la liste déroulante:

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])] 
     }) 
    }