Angular 7中通过FormControlName编程设置下拉框值失败，求解决方案

我来帮你排查并解决这个问题，你遇到的情况大概率是几个小细节没处理到位：

1. 先修正模板里的两处关键错误 #

你写的模板里有两个拼写/属性名错误，这是表单绑定失效的基础问题：

• fornControlName 是笔误，应该改为 formControlName
• PrimeNG的p-dropdown接收选项的输入属性是 [options]，不是 [values]

修正后的模板代码：

<form [formGroup]="myform">
  <p-dropdown [options]="dropdownData" formControlName="datavalue"></p-dropdown>
</form>

注意：表单控件必须包裹在带有[formGroup]="myform"的<form>标签内，否则formControlName无法正常绑定

2. 让表单值与下拉选项匹配 #

PrimeNG的p-dropdown默认会根据整个选项对象做匹配，如果你直接给表单设置字符串值（比如"USA"），它找不到对应的选项，自然不会生效。这里有两种解决思路：

方案一：指定optionValue字段（推荐） #

在模板里添加optionValue="value"，告诉下拉框用选项里的value属性作为表单控件的值，同时可以用optionLabel="name"指定显示的文本：

<p-dropdown 
  [options]="dropdownData" 
  formControlName="datavalue"
  optionLabel="name"
  optionValue="value"
></p-dropdown>

这时你原来的setValue("USA")代码就可以正常生效了。

方案二：传入整个选项对象赋值 #

如果不想指定optionValue，可以找到对应的选项对象再传给setValue：

ngOnInit(){
  const targetOption = this.dropdownData.find(item => item.value === "USA");
  this.myform.controls['datavalue'].setValue(targetOption);
}

3. 完整可运行的代码示例 #

app.component.html #

<form [formGroup]="myform">
  <p-dropdown 
    [options]="dropdownData" 
    formControlName="datavalue"
    optionLabel="name"
    optionValue="value"
    placeholder="Select a country"
  ></p-dropdown>
</form>

app.component.ts #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  dropdownData = [ 
    {name:'UK',value:'UK'}, 
    {name:'USA',value:'USA'}, 
    {name:'CHINAA',value:'CHINAA'} 
  ];
  myform!: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(){ 
    this.myform = this.fb.group({ 
      datavalue: [null] 
    });
    // 现在设置字符串值就能正确选中对应选项了
    this.myform.controls['datavalue'].setValue("USA");
  }
}

额外提示 #

别忘了确保你已经在模块中导入了PrimeNG的DropdownModule，否则下拉组件无法正常渲染。

内容的提问来源于stack exchange，提问作者Kaviya B