Question

我在Primeng的下拉列表中附加formGroup formControlName，当我尝试使用键盘在下拉菜单中选择一个选项时，所有功能都完美无缺。

如果您将所需的此下拉列表连接到在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])]
        })
    }

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

1 个答案: