Angular 反应形式的 PrimeNG 下拉组件 - 初始值

Question

使用 primeNg 下拉组件，我试图用初始值初始化下拉列表但没有成功，我正在使用反应式方法。

我查看了 primeNg 文档和演示 - 几乎所有示例都使用模板驱动，我希望模型驱动也一样。

我可以使用列表中的值呈现下拉列表，但所选项目不是我在表单中声明的项目，而是列表中的第一项。

我的代码：模板

    <div [formGroup]="formGroup">
      <p-dropdown [options]="results"
                 formControlName="second"
                (onChange)="onChangeHandler($event)"
                optionLabel="label">
       </p-dropdown>
    </div>

组件

  this.second = new FormControl('second');
  this.formGroup= this.builder.group({
            second: this.second
        });


    this.results = [];
    this.results.push({ label: 'First Data', value: "first" });
    this.results.push({ label: 'Second Test Data', value: "second" });
    this.results.push({ label: 'Third Data', value: "third" });

请指教

如果有人可以在模型驱动中分享 primeNG 下拉组件的工作示例，那就太好了。这些值应该像我的示例中那样具有键值属性。

Answer 1

由于名为 second 的 FormControl 是您的 FormGroup 的一部分，实例化应该在 FormGroup 本身内。考虑以下示例，

this.formGroup= this.builder.group({
    second: new FormControl('second')
});

Angular 反应形式的 PrimeNG 下拉组件 - 初始值

Angular PrimeNG dropdown component in reactive forms - initial value

selecteditem

dropdown

primeng

angular

angular-reactive-forms