Primeng：在模型驱动表单组中使用键盘选择下拉值答案

【问题标题】：Primeng : Select dropdown value with keyboard in model driven form groupPrimeng：在模型驱动表单组中使用键盘选择下拉值
【发布时间】：2017-09-20 07:25:35
【问题描述】：

我有一个 formGroup 和一个 formControlName 附加在 Primeng 的下拉列表中，当我尝试使用键盘在下拉列表中选择一个选项时，所有这些都可以正常工作。

如果您将所需的此下拉列表耦合到在 formGroup 无效时禁用的按钮：

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

如果我使用键盘在下拉选择中选择一个值，则此按钮永远不会激活。在我的页面中，我使用 Tab 键聚焦下拉元素，并使用箭头键选择一个值。选择的值显示在下拉列表中，但下拉列表对应的formGroup.value 仍然为空...

我不明白为什么以及如何解决这个问题。

【问题讨论】：

标签： angular dropdown primeng

【解决方案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])]
        })
    }

【讨论】：